У меня есть 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);
});
});