Fullcalendar v2: How to maintain the same scroll time when navigating by week?

Question

In Fullcalendar 2, when I move between weeks, I would like to maintain the same time ranges in vertical scrolling. For example, in the images below, I initially look from 12 a.m. to 3 p.m. But when I press the next arrow to move on to the next week, it resets at 8 in the morning.

I know that I can change the default start time with

scrollTime: "08:00:00", 

but how do I make the vertical time interval be “fixed” on what I find?

Answer 1

Unfortunately, this is not built-in functionality. There is a workaround, but you will always flicker a little when you go to the previous / next week.

 var scroll = -1, viewNames = ['agendaWeek', 'agendaDay']; $('#calendar').fullCalendar({ //... eventAfterAllRender: function(view) { if(scroll > -1 && viewNames.indexOf(view.name) !== -1) //Use a setTimeout hack here because the scrollTime will be set after eventAfterAllRender is processed. setTimeout(function(){ document.querySelector('.fc-agenda-slots').parentNode.parentNode.scrollTop = scroll; }, 0); }, viewDestroy: function(view) { if(viewNames.indexOf(view.name) !== -1) scroll = document.querySelector('.fc-agenda-slots').parentNode.parentNode.scrollTop; } //... }); 

jsfiddle

This code will work for FullCalendar v2. The scrolling div is supposed to be the parent of the parent .fc-agenda-slots div.

Answer 2

Working code compatible with fullcalendar 2.6.1

I started this code from the post below ( A1rPun ).

JSFiddle Work

 var scroll = -1; $('#calendar').fullCalendar({ // init calendar header: {left: 'today prev,next, refresh title', right: 'agendaDay,agendaWeek'}, allDaySlot: false, defaultView: 'agendaDay', // when all the events are rendered, scroll to the previous saved scroll position eventAfterAllRender: function(view) { if(scroll > -1 && (view.name=='agendaDay' || view.name=='agendaWeek')) setTimeout(function(){ document.querySelector('.fc-scroller').scrollTop = scroll; },0); }, // when view is destroyed, we keep the scroll position in a variable viewDestroy: function(view) { if(view.name=='agendaDay' || view.name=='agendaWeek') scroll = document.querySelector('.fc-scroller').scrollTop; } }); // end calendar 

This solution works in AgendaDay and AgendaWeek modes. It also works when switching between them.

I don’t think it’s very nice, because you need to wait until all the events are displayed. The more events you have on the calendar, the longer it will take to scroll.

A good solution would be to use

Fullcalendar scrollTime option

You can set it to viewRender like this. This will cause the calendar to scroll to this time.

 viewRender: function(view, element){ view.options.scrollTime = '09:00:00'; } 

Perhaps there is a way to convert the scroll value in time and then display it on the calendar.

EDIT 1

I realized that it is much better to use viewRender callback instead of eventAfterAllRender callback to set the scroll position.

Here is the JSFiddle

 viewRender: function(view, element){ if(scroll > -1 && (view.name=='agendaDay' || view.name=='agendaWeek')){ setTimeout(function(){ document.querySelector('.fc-scroller').scrollTop = scroll; },0); } }, 

This allows you to switch between other views (month, basicWeek ...) and save scrolling. And it's a little faster

Answer 3

I have:

 var height = $(window).scrollTop(); console.log("current height " + height); $('#calendar').fullCalendar( 'removeEvents'); $('#calendar').fullCalendar( 'addEventSource', e); $('#calendar').fullCalendar( 'addEventSource', holiday); $('#calendar').fullCalendar( 'refetchEvents'); window.scrollTo(0,height); console.log("scroll to " + height); 

and it works for me

Answer 4

Here you can set the basic configuration.

 scrollTime: '08:00:00', minTime: '00:00:00', // Set your min time maxTime: '24:00:00', // Set your max time 

Yes, most importantly, the "height" parameter should not be present in the calendar settings.

Uncheck the option below.

  height: 'auto' 

Answer 5

Although I would like to see this as a built-in function, it is the fastest and at the same time smaller detailed solution I found:

 viewDestroy: function (view) { if (view.name=='agendaDay' || view.name=='agendaWeek') { var scrollEl = document.querySelector('.fc-scroller'); var scrollFraction = scrollEl.scrollTop / scrollEl.scrollHeight; this.scrollTime = moment().startOf('day').add(3600 * 24 * scrollFraction, 's').format('HH:mm:00'); view.options.scrollTime = this.scrollTime; } } 

Note that this assumes a scroll range of 12 AM-12AM. If you limit the visible area, you must also adapt the length of the day.

You can try: JSFiddle

Answer 6

give a unique class to the event object. add this code after the event visualization method. he will move on to this particular event

  $('.fc-scroller').animate({ scrollTop: $('write here unique class of event').position().top }); 

Answer 7

To avoid “scrolling” the scroll, I did it as follows (in fullCalendar 2.9.1):

 viewDestroy: function( aView ) { // At first view date change, get height of an hour if( !lineHeight ) lineHeight = $('#calendar').find( "tr.fc-minor" ).height() * 2; // then convert current scroll to hour decimal var lScrollCurrHour = Math.max( ($('#calendar').find( ".fc-scroller" )[0].scrollTop - 1) / lineHeight, 0 ); // finally, use moment() to convert to a formatted date aView.options.scrollTime = moment().startOf('day') .add(lScrollCurrHour, "hours").format("HH:mm:ss"); } 

He will share a scroll for agendas and weeks.

Hope this helps: o)

Answer 8

You can use this to do the scroll time at the right time.

 customButtons:{ PreviousButton: { text: 'Prev', icon: 'left-single-arrow', click: function() { $('#calendar').fullCalendar('prev'); $("#calendar").fullCalendar( 'scrollTime',"08:00:00" ); } } }` 

The method specified here is for the previous button only. Similarly, we have a custom button for all buttons by default in the full calendar, and we can add this method to scroll through the time when necessary. I hope this helps.