Making fullcalendar scroll to the current time?
Do you mean that you want the calendar to display, automatically centered around the current time of day (of render time)?
Assuming that you are happy that the day columns are always in the same place there is the firstHour
option in the agendaWeek
view which might work for you.
For illustration, let's assume that the number of hours on the Y-axix in your given view is 10 then something like:
var firstHour = new Date().getUTCHours() - 5;
$('#calendar').fullCalendar({
firstHour: firstHour;
});
More details on view controls are available here
On v2 this has changed, here is how to do it in this new version:
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
scrollTime: '09:00:00'
});
Version 3:0+
On Initialization
For initial scroll position matching to some time on Weekly view:
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
scrollTime: '09:00:00'
});
Post Initialization
For dynamically changing/setting the scroll position (e.g. 1:00 pm on Week view) after initialization: (no documented method would work but this hack :) )
$(".fc-scroller").animate({
scrollTop: $('[data-time="13:00:00"]').position().top // Scroll to 01:00 pm
}, 1000);
This is what I used to scroll to the current time in the view :
var scrollTime = moment().format("HH:mm:ss");
$('#calendar').fullCalendar({
now: today,
scrollTime: scrollTime
});
For UX purpose, I rounded down to the nearest hour so user can clearly see where (when) the calendar view is :
var scrollTime = moment().format("HH") + ":00:00";
$('#calendar').fullCalendar({
now: today,
scrollTime: scrollTime
});
Check the fullCalendar scrollTime
parameter.