Полноценный пользовательский вид выпуска - PullRequest
0 голосов
/ 06 декабря 2018

У меня есть 4 календаря на моей странице, [1 (декабрь), 2 (январь), 3 (февраль)] показывает месяцы, 4 показывает список событий (пользовательский просмотр за 3 месяца (декабрь, январь, февраль)).Навигация по календарю для календарей 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 Ответ

0 голосов
/ 08 декабря 2018

В календаре 4 установите lazyFetching false, тогда каждый раз, когда смена даты FC выполнит вызов Ajax и обменяет данные.

https://fullcalendar.io/docs/lazyFetching

...