Scroll to next month in fullcalendar.js

Question

I want to scroll through months in month view of the fullcalendar.js plugin. Does anyone know how to do this?

Thanks!

Answer 1

1. Listen to the scroll event using jquery or whatever. Look here for example
2. Use the next and previous methods.

If you only want to allow scrolling when on a certain view (i.e. the month view) then you can use the getView method to check what view you're currently on.

Answer 2

Here is the JS code to have infinite scroll in an fullCalendar Scheduler :

    $(document).ready(function() {
$('#calendar').fullCalendar({
    header: {
        left: 'today prev,next',
        center: 'title',
        right: 'timelineDay,timelineFiveDays,timelineWeek,timelineMonth,timelineYear'
    },
    defaultView: 'timelineDay',
    views: {
        timelineFiveDays: {
            type: 'timeline',
            duration: { days: 5 }
        }
    },
    eventOverlap: false, // will cause the event to take up entire resource height
    resources: [
        { id: 'b', title: 'Bureau Information', children: [
            { id: 'b1', title: 'Bureau 1', eventColor: '#127F00' },
            { id: 'b2', title: 'Bureau 2', eventColor: '#66FF4C' }
        ] },
        { id: 'c', title: 'Cabines', children: [
            { id: 'c1', title: 'Cabine 1', eventColor: '#02417F' },
            { id: 'c2', title: 'Cabine 2', eventColor: '#51A9FF' }
        ] },
        { id: 'e', title: 'Events centre', children: [
            { id: 'e2', title: 'Un seul RDV cabine', eventColor: '#FFD753' },
            { id: 'e3', title: 'Un seul RDV info', eventColor: '#FFC607' },
            { id: 'e4', title: 'Aucun RDV cabine', eventColor: '#7F6C2A' },
            { id: 'e5', title: 'Aucun RDV info', eventColor: '#CC9E05' },
            { id    : 'e6', title: 'Fermetue exceptionnelle', eventColor: '#7F6303' },
            { id: 'e7', title: 'Vacances', eventColor: '#FFD753' },
            { id: 'e8', title: 'Autre', eventColor: '#FFC607' }
        ] }
    ],
    events: [
        { id: '1', resourceIds: ['b1','p3'], start: '2016-05-07T09:00:00', end: '2016-05-07T10:00:00', title: 'Marie Dupont' },
        { id: '2', resourceIds: ['c1','p1'], start: '2016-05-07T10:00:00', end: '2016-05-07T10:30:00', title: 'Léa Durand' },
        { id: '3', resourceIds: ['c2','p2'], start: '2016-05-07T10:00:00', end: '2016-05-07T11:30:00', title: 'Julie Martin' }
    ]
});
//console.log("before bind");
$(".fc-scroller:nth-child(1)").bind('scroll', function(event) {
    console.log($(this).scrollLeft()+" --- "+$(this).innerWidth()+" --- "+$(this)[0].scrollWidth);
    if($(this).scrollLeft() <= 0) {
        //left scroll : end reached
        $('#calendar').fullCalendar('prev');
    }
    if($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
        //right scroll : end reached
        $('#calendar').fullCalendar('next');
    }
});
//console.log("after bind");

});

And the Html :

<div id='calendar'></div>