The standard increments are set to 15 minutes. Is it possible to change this to 5m or even 1m?
And maybe not the view but the option to make appointments with custum length
you have to use slotDuration (link doc) if you use v2 or slotMinutes (link doc) for v1. Maybe you also have to use defaultEventMinutes (link doc) to v1 or defaultTimedEventDuration (link doc)
example for v1:
$('#calendar').fullCalendar({
...
slotMinutes: 5,
defaultEventMinutes: 5,
...
});
example v2:
$('#calendar').fullCalendar({
...
slotDuration: '00:05:00',
defaultTimedEventDuration: '00:05:00',
...
});
Related
In my app I have some videos and users can like it. video metadata saves in the node "videos", something like this:
videos: {
xxxxx: {
name: "Funny video",
likes: 255,
....
}
}
And I have another node "userVideos" only with video ids.
userVideos: {
xxxxx: true,
yyyyy: true,
}
In the UI I want to show the ranking of the video. For example, I have 5 videos: v01 has 5 likes, v02 - 10, v03 - 1, v04 - 100, v05 - 3.
So, when I get from userVideos the video with id "v03", I should know that his ranking is 5 ('cause if I get the videos list with orderBy DESC my videos node, the position of v03 is 5).
I think that the cloud function should calculate this ranking.
My question is next: is I have a possibility to get the position in the sorted node by key?
Realtime Database queries can't tell you the position of a child snapshot in a sorted query. You have to write code to maintain that data for yourself.
In my agendaDay view I some times need to display events that do not have an end time:
$(".agenda").fullCalendar({
events: [
{
title: "Start day",
start: '2017-04-19T09:00:00'
},
{
title: "Do some work",
start: '2017-04-19T09:05:00',
end: '2017-04-19T17:00:00'
}
]
});
Such events get rendered as if they lasted two hours:
Is there a way to control that or an alternative feature I should be using?
Docs for v1 mention the exact property I need:
defaultEventMinutes 1.4
Determines the length (in minutes) an event appears to be when it has
an unspecified end date.
Integer, default: 120
By default, if an Event Object as no end, it will appear to be 2
hours.
... but the property is apparently not available on 3.3.1 :-?
In the v2 & 3 API it's been split in two properties, so you can set different values to all day events and timed ones:
defaultAllDayEventDuration
defaultTimedEventDuration
Also, the new properties expect a string with a time ("00:45:00") rather than seconds (2700).
Sample View:
I would like to create a custom year view to show the timeline in every month slots. I can use fullcalendar-scheduler with a custom view and define like this:
views: {
timelineCustom: {
type: 'timeline',
buttonText: 'Year View',
duration: {year:1},
slotDuration: {month:1}
}
}
However, there is no way to set up a fiscal year view with month start at April 1st and end at March 31st next year. And also, a timeline bar will cover a whole month slot even though an event only starts from the second half of that month.
Your first problem - starting the view in April and ending in March of the following year, can be solved using the new "visibleRange" option. This lets you supply start/end dates for the view, relative to the "currentDate" (i.e. the date fullCalendar curently regards as being selected). You also have to set the "dateIncrement" option, to ensure that Next/Previous increment the current date by 1 year.
N.B. This requires fullCalendar 3.3.0 and Scheduler 1.6.0, or later.
timelineCustom: {
type: 'timeline',
buttonText: 'Year View',
dateIncrement: { years: 1 },
slotDuration: { months: 1 },
visibleRange: function(currentDate) {
return {
start: currentDate.clone().startOf('year').add({ months: 3}),
end: currentDate.clone().endOf("year").add({ months: 4})
};
}
}
See https://fullcalendar.io/docs/current_date/visibleRange/ and https://fullcalendar.io/docs/current_date/dateIncrement/ for more details
However, your issue where the timeline bar covers a whole month slot even though an event only starts in the second half of a month, is not really solvable in the way you want. The whole point of "slots" is to be the minimum time that an event can be displayed for in that particular view. If you want it to be more subtle than that, you would have to define shorter slots. The same thing happens in fullCalendar's default "Month" (non-timeline) view - all events cover a whole day even if they're timed, but you can see the times in the description. I see in your example you have already got the dates of those events displayed in the description, so it should be reasonably clear for your users.
I suggest your users click on the Month View to get a more detailed breakdown with the slot durations more accurately displayed. Either that or you have to compromise and set slotDuration to something smaller.
I am using FullCalendar and when I set the calendar view to Week View and try to create an event with a duration greater than 1 day, the event's start time label is changed to 0:00 and won't update. I have tried to increase the maxTime to more than 24 hours as follows (Which did not help):
fcViews.agenda = {
'class': AgendaView,
defaults: {
allDaySlot: true,
allDayText: 'all-day',
slotDuration: '00:30:00',
minTime: '00:00:00',
maxTime: '48:00:00',
slotEventOverlap: true // a bad name. confused with overlap/constraint system
}
};
I tried to do the same on the calendar at FullCalendar's official webpage and it has the same behavior. Could anyone help please?
Namaste #Arvindji
Calendar timeline should not be greater than 1 day. You should restrict max time to 24:00:00
maxTime: '24:00:00',
Because if you set maxTime: '48:00:00', then fullcalendar will show 48 hours in one day as a result each day column in fullcalendar will have 48 hours. Here there is a loophole in timeline. But the event will not show properly.
So try to bind 24 hours as max time and see result, calendar will break events sharing two days into two parts for both days separately.
FullCalendar-plugin is in question. How to set firstHour and/or minTime with shortcode? I just would like to show either hours from 7 to 17 or firsthour 7. How can I do that?
Cheers,
Sami
Not sure what you mean by shortcode, but here is how you would go about setting the min and maxTime (if you just want to set the first hour remove min and max and insert firstHour instead):
$('#calendar').fullCalendar({
events: eventsArrayOrJSONCall,
...
minTime: 7,
maxTime: 17
});