Fullcalendar 自定义视图问题（导航）

Posted 2023-05-09

【中文标题】Fullcalendar 自定义视图问题（导航）

【英文标题】：Fullcalendar custom view issue (navigation)

【发布时间】：2019-05-08 06:02:05

【问题描述】：

我的页面上有 4 个日历，[1（12 月）、2（1 月）、3（2 月）] 显示月份，4 显示事件列表（自定义视图 3 个月（12 月、1 月、2 月） ）。日历导航在 3 和 4 日历上。

问题是我想在 3 个日历的未来一个月导航并重新加载 4 个更改日期的日历，但是如果我单击下一步，gotoDate 在第 4 个日历中无法按预期工作并且日期不会更改，因为 3 4 个日历中的持续时间。如果我点击返回，它会正常工作。

也许有一些解决方法可以解决我的问题？

我知道这里有很多聪明人，请帮我解决这个问题，因为我至少一周做不到；/

     $(document).ready(function () 
        trainings = ["id":21,"role_id":5,"title":"Test","start":"2018-12-13 17:11:00","end":"2018-12-13 19:11:00","end_date":"2018-12-13 19:11:00","url":"https:\/\/example.com\/trainings\/21","color":"#f7daba","id":14,"role_id":5,"title":"Test mail","start":"2018-12-07 14:00:00","end":"2018-12-07 16:00:00","end_date":"2018-12-07 16:00:00","url":"https:\/\/example.com\/trainings\/14","color":"#f7daba","id":12,"role_id":5,"title":"Test","start":"2018-11-28 11:00:00","end":"2018-11-28 14:00:00","end_date":"2018-11-28 14:00:00","url":"https:\/\/example.com\/trainings\/12","color":"#eeeeee","id":11,"role_id":8,"title":"Test","start":"2018-11-29 11:00:00","end":"2018-11-29 15:00:00","end_date":"2018-11-29 15:00:00","url":"https:\/\/example.com\/trainings\/11","color":"#eeeeee","id":9,"role_id":8,"title":"Test","start":"2018-12-09 14:00:00","end":"2018-12-09 16:00:00","end_date":"2018-12-09 16:00:00","url":"https:\/\/example.com\/trainings\/9","color":"#d1bdf8","id":7,"role_id":8,"title":"Test","start":"2018-11-01 11:00:00","end":"2018-11-01 17:00:00","end_date":"2018-11-01 17:00:00","url":"https:\/\/example.com\/trainings\/7","color":"#eeeeee","id":3,"role_id":5,"title":"Mokymai #2","start":"2018-11-21 14:00:00","end":"2018-11-21 14:00:00","end_date":"2018-11-21 14:00:00","url":"https:\/\/example.com\/trainings\/3","color":"#eeeeee"];

        var cal1 = $('#calendar1');
        var cal2 = $('#calendar2');
        var cal3 = $('#calendar3');
        var cal4 = $('#calendar-list');

        cal1.fullCalendar(
            header: 
                left: 'title',
                center: '',
                right: ''
            ,
            height: "auto",
            defaultDate: moment().format('YYYY-MM-DD'),
            fixedWeekCount: false,
            events: trainings,
            viewRender: function (view, element) 
                element.find('.fc-head').hide();
            ,
            eventRender: function(event, element, view) 
                var dateString = moment(event.start).format('YYYY-MM-DD');
                $('#calendar1').find('td[data-date="' + dateString + '"]').find('.fc-day-number').css('background-color', event.color);
            
        );

        cal2.fullCalendar(
            header: 
                left: 'title',
                center: '',
                right: ''
            ,
            height: "auto",
            defaultDate: moment().add(1, 'months').format('YYYY-MM-DD'),
            fixedWeekCount: false,
            events: trainings,
            viewRender: function (view, element) 
                element.find('.fc-head').hide();
            ,
            eventRender: function(event, element, view) 
                var dateString = moment(event.start).format('YYYY-MM-DD');
                $('#calendar2').find('td[data-date="' + dateString + '"]').find('.fc-day-number').css('background-color', event.color);
            
        );

        cal3.fullCalendar(
            header: 
                left: 'title',
                center: '',
                right: 'prev,next'
            ,
            height: "auto",
            defaultDate: moment().add(2, 'months').format('YYYY-MM-DD'),
            fixedWeekCount: false,
            events: trainings,
            themeSystem: 'bootstrap4',
            viewRender: function (view, element) 
                element.find('.fc-head').hide();
                cur = view.intervalStart;
                d1 = moment(cur).subtract(2, 'months');
                d2 = moment(cur).subtract(1, 'months');
                cal1.fullCalendar('gotoDate', d1);
                cal2.fullCalendar('gotoDate', d2);

                cal4.fullCalendar('gotoDate', d1);
            ,
            eventRender: function(event, element, view) 
                var dateString = moment(event.start).format('YYYY-MM-DD');
                $('#calendar3').find('td[data-date="' + dateString + '"]').find('.fc-day-number').css('background-color', event.color);
            
        );

        cal4.fullCalendar(
            header: 
                left: 'title',
                center: '',
                right: 'prev,next'
            ,
            defaultView: 'agendaThreeMonths',
            events: trainings,
            timeFormat: 'H:mm',
            views: 
                agendaThreeMonths: 
                    type: 'listMonth',
                    duration:  months: 3 
                
            ,
            viewRender: function (view, element) 
                cur = view.intervalStart;
                d1 = moment(cur).add(1, 'months');
                d2 = moment(cur).add(2, 'months');
                cal1.fullCalendar('gotoDate', cur);
                cal2.fullCalendar('gotoDate', d1);
                cal3.fullCalendar('gotoDate', d2);
            ,
        );

        $('.fc-other-month').html('');
        $('.fc-row table tbody').remove();

        $('.fc-prev-button').click(function () 
            $('.fc-other-month').html('');
            $('.fc-row table tbody').remove();
        );

        $('.fc-next-button').click(function () 
            $('.fc-other-month').html('');
            $('.fc-row table tbody').remove();
        );

        $('.fc-day-number').bind('click', function() 
            $('html, body').animate(
                scrollTop: $("#calendar-list").offset().top - 70
            , 1000);
        );

    );

【问题讨论】：

您解决了这个问题吗？

【参考方案1】：

在日历 4 上将lazyFetching 设置为 false，那么只要日期更改，FC 就会进行 Ajax 调用并换出数据。

https://fullcalendar.io/docs/lazyFetching