Question

我想滚动浏览fullcalendar.js插件的月份视图。有谁知道怎么做？

谢谢！

Answer 1

使用jquery或其他方式监听滚动事件。 Look here for example
使用next和previous方法。

如果您只想在特定视图（即月视图）上滚动，则可以使用getView方法查看您当前所使用的视图。

Answer 2

这是在fullCalendar计划程序中具有无限滚动的JS代码：

    $(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>

在fullcalendar.js中滚动到下个月

2 个答案: