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

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

fullcalendar scroll
fullcalendar day view
fullcalendar scroll to top
fullcalendar events not rendering
fullcalendar v4
fullcalendar change view
show full calendar
fullcalendar example

On Fullcalendar 2, when I navigate between weeks, I'd like to maintain the same time ranges in the vertical scroll. For example, in the below images, I am initially looking at times from 12am-3pm. But when I press the next arrow to go to the next week, it resets at 8am.

I know that I can change the default starting time with

scrollTime: "08:00:00",

but how do I make it so that the vertical time range is "fixed" to what I am on?


Unfortunately this is not build-in functionality. There is a workaround but you will always have a little bit of flickering 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. It assumes that the scrolling div is the parent of the parent of the .fc-agenda-slots div.

Issues · fullcalendar, Unfortunately this is not build-in functionality. There is a workaround but you will always have a little bit of flickering when you go to the previous/next week. [ Natty] javascript Fullcalendar v2: How to maintain the same scroll time when navigating weeks? By: Dominic 0.5 ; [ Natty ] javascript Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.


Working Code compatible with fullcalendar 2.6.1

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

Working JSFiddle

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 is working in 'agendaDay', and 'agendaWeek' views. It's also working when you switch between them.

I don't think it is very pretty because you need to wait until after all the events are rendered. The more events you have on your calendar, the more time the scroll will take..

A good solution would be to use the

Fullcalendar option scrollTime

You can set it in viewRender like this. That will have the effect to make the calendar scroll to this time.

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

Maybe there is a way to convert the scroll value into time and then render it to the calendar.

EDIT 1

I figured out that is way much better to use the viewRender callback, instead of the 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);

            }
        },

It's allowing to switch between other wiews (month, basicWeek...) and keep saving the scroll. And it's a bit faster

fullcalendar 2.6.1 autoscroll - JSFiddle, 43, Navigate previous/next when dragging event to edges Event DnD/Resize. 41, highlight 19, Automatically scroll to current time Scrolling 8, display events on multiple resources with same ID Event Rendering 2, Display now indicator across entire week in timeGrid view Now Indicator TimeGrid View. Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.


What I have is:

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

iPad Portable Genius, Scroll to Genius the Calendars section, tap Sync, and then tap how far back you want to go: Events 2 Weeks Back, All the more reason to keep your affairs in order, and that includes your appointments. Week. This view shows all your events for the selected week. To navigate this view, scroll the screen left or right. Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.


Here you can set basic configuration.

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

yes, main thing is 'height' parameter should not be there in calendar configuration.

Remove below parameter

 height: 'auto'

Navigate previous/next when dragging event to edges · Issue #2542 , I'm trying to get dragScroll (http://fullcalendar.io/docs/event_ui/dragScroll/) working, but to scroll the visible times [2] Start dragging an event, like 'Lunch' and keep it (while Can't drag event to differnt week in agendaWeek view #2583 the dragging with the right event (what if there are several events at the same time) ? Another idea would be to automatically expand days/weeks views if there are meetings out of the selected range (before minTime or after maxTime). Then while navigating between days or weeks, the calendar would expand and collapse depending on the meetings of the current day/week. => This could be an new option to allow this behavior. 👍


While I would like to see this as build-in function, this is the fastest and at the same time less verbose 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;
    }
}

Notice that this assumes the scroll range is 12AM-12AM. If you limit your visible area, you should adapt the day duration as well.

You can try it out: JSFiddle

Automatically scroll to current time · Issue #861 · fullcalendar , i think scrolling (.focus() ?) to the next event in week view could be better and yes, if there is not why not scrollTo(scrollTarget); } } This will keep the timeline exactly in the middle of the scrollable area. How to scroll to today in timelineMonth view fullcalendar/fullcalendar-scheduler#284 I have exactly the same error. Best Time Scheduling automatically publishes your posts at the best time for your audience and using the feature is as easy as clicking a button. Go to your CoSchedule calendar and craft a social media post by clicking + > Social Message: Scroll down to the bottom of the post and in the drop-down menu select Best Time:


fullCalendar 2.3.3 with multiple events constraint to the same day , FullCalendar v2.4.0 * Docs & License: http://fullcalendar.io/ * (c) 2015 Adam Shaw computed left/right/top/bottom scrollbar widths for the given jQuery element. considering the locale's custom week number calcuation // `weeks` is an alias for set `preserveTime` to `true` to keep times, but only normalize zone ambiguity. There is a scroll bar to scroll between rooms, since the maximum room availability that can be displayed is four. And the same with the previous hotel reservation template, once your customer agreed with the time, you can go back to “room booking” worksheet to fill your customer detail information. Daily Reservation Calendar


fullcalendar with year, _fullCalendar = true; // flag for extended functionality return mom; } // Week Number _ambigTime; this.utc(true); // keepLocalTime=true (for keeping date and time like "Sep 2 - 9 2013", that intelligently inserts a separator where the dates differ. If the dates are the same as far as the format string is concerned, just return a  start - Sets the start date and time for the event. It can be a date object, ISO date string or moment.js object; end - Sets the end date and time for the event. The same formats are supported as for start; This is how a simple event looks like with a couple of extra properties:


The time-zone offset is the difference, in minutes, from local time to UTC. Note that this means that the offset is positive if the local timezone is behind UTC and negative if it is ahead. For example, for time zone UTC+10:00 (Australian Eastern Standard Time, Vladivostok Time, Chamorro Standard Time), -600 will be returned.