Question

我的页面上有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);
        });

    });

Answer 1

在日历4上将lazyFetching设置为false，那么无论何时日期更改FC都会进行Ajax调用并换出数据。

https://fullcalendar.io/docs/lazyFetching

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

1 个答案: