在fullcalendar.js中滚动到下个月

Question

我想滚动浏览fullcalendar.js插件的月份视图中的月份。有谁知道如何做到这一点？

谢谢！

Answer 1

1. 使用jquery或其他方法来收听滚动事件。 Look here for example
2. 使用next和previous方法。

如果您只想在某个视图（即月视图）上允许滚动，则可以使用getView方法来检查您当前所处的视图。

Answer 2

这里是JS代码具有无限滚动在fullCalendar调度程序：

$(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"); 

}）;

和HTML：

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