Making fullcalendar scroll to the current time?

Simply put, is the开发者_如何学JAVAre a way to have fullcalendar scroll to the current time position in the week view?

If it helps, I'm using Ruby on Rails and jQuery

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.

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);

I had a similar problem and solved it with this solution...

setTimeout(function(){ // Timeout
    $(".fc-today").attr("id","scrollTo"); // Set an ID for the current day..
    $("html, body").animate({
        scrollTop: $("#scrollTo").offset().top // Scroll to this ID
    }, 2000);
}, 500);    

If you need to set Options Dynamically (after a calendar has already been initialized) then the right way to do this is by using this link

var scrollTime = '10:00:00'; //replace this any time you need
$('#calendar').fullCalendar('option', 'scrollTime', scrollTime);

For fullcalendar@^4.3.0 i used scrollToTime function with calendar's render range start:

calendar.state.dateProfile.renderRange.start

so it works for me in this way:

    var calendarEl = document.getElementById('scheduler');
    var calendar = new FullCalendar.Calendar(calendarEl, { ... })

    var now = new Date();
    var rangeStart = calendar.state.dateProfile.renderRange.start;

    // attention here
    calendar.scrollToTime(now - rangeStart);

it works, by the way, no matter what is the defaultView value is.

Use the today function:

$('#calendar').fullCalendar('today');