Running a full scrolling calendar to the current time?

Question

Simply put, is there a way to scroll fullcalendar to the current time position in weekly mode?

If this helps, I use Ruby on Rails and jQuery

Answer 1

Do you want you to display a calendar automatically centered around the current time of day (rendering time)?

Assuming you're happy that the columns of the day are always in the same place, there is a firstHour option in the agendaWeek that might work for you.

To illustrate, suppose the number of hours on Y-axix in your view is 10, then something like:

 var firstHour = new Date().getUTCHours() - 5; $('#calendar').fullCalendar({ firstHour: firstHour; }); 

Learn more about view controls here.

Answer 2

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 purposes, I have rounded to the nearest hour so that the user can clearly see where (when) the calendar view:

 var scrollTime = moment().format("HH") + ":00:00"; $('#calendar').fullCalendar({ now: today, scrollTime: scrollTime }); 

Check the fullCalendar scrollTime parameter.

Answer 3

In v2, this has changed, here's how to do it in this new version:

 $('#calendar').fullCalendar({ defaultView: 'agendaWeek', scrollTime: '09:00:00' }); 

Answer 4

If you need to set the parameters dynamically (after the calendar has already been initialized) then the correct way to do this is to use this link.

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

Answer 5

I had a similar problem and it was solved 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); 

Answer 6

For fullcalendar@ ^ 4.3.0, I used the scrollToTime function with the beginning of the calendar display range:

 calendar.state.dateProfile.renderRange.start 

so it works for me:

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

By the way

this works regardless of the defaultView value.

Answer 7

Use the function today :

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