0

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

Thanks!

Weissvonnix
  • 731
  • 7
  • 23
  • Do you about `scrollTime` function? Please, explain what you want in detail. – dizel3d Sep 30 '14 at 20:01
  • when the user is in Month-View, I want to go to next month when the user scrolls down, and to the previous month when the user scrolls up. – Weissvonnix Sep 30 '14 at 20:19

2 Answers2

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>
Tikia
  • 21
  • 2
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.

Community
  • 1
  • 1
Richard Löwenström
  • 1,533
  • 13
  • 16
  • 1
    thanx! I need to use the "mousewheel" event, because "scroll" only fires when a scrollbar is scrolled. I don't have a scrollbar because the calendar is always resized to fit the screen. And for the record, the current fullcalendar version uses fullcalendar('prev') and fullcalendar('next') to switch the view. – Weissvonnix Oct 10 '14 at 21:11