Программно изменить дату полного календаря 4

Я использую полный календарь v4. У меня есть мини-календарь, в котором после нажатия на событие я хочу, чтобы на эту дату переходил другой календарь большего размера (calendar_full).

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function() {

    var calendar1 = document.getElementById('calendar_mini');

    var calendar_mini = new FullCalendar.Calendar(calendar1, {
        plugins: ['interaction', 'dayGrid'],
        eventClick: function(info) {

            //when clicking on events, go to date on main calendar
            calendar.gotoDate(info.event.start)


        }
 ...
});

document.addEventListener('DOMContentLoaded', function() {

    var calendar_full = document.getElementById('calendar_full');

    var calendar = new FullCalendar.Calendar(calendar_full, {
         plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
         header: {
            right: 'prevYear,prev,next,nextYear,today',
            left: 'title',
            center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
            },
           selectMirror: true,
 ...
)};

В коде calendar_mini функция eventClick для calendar.gotoDate(info.event.start) НЕ изменяет основной календарь. Я получаю сообщение об ошибке:

Uncaught ReferenceError: calendar is not defined

javascript jquery fullcalendar fullcalendar-4 fullcalendar-scheduler
person chris.cavage    schedule 01.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что переменная с именем «календарь» не входит в область действия, когда вы используете ее в обратном вызове, поэтому она не определена. Его область действия ограничена обратным вызовом DOMContentLoaded, в котором вы его объявили.

Теперь вам не нужны два отдельных обратных вызова «DOMContentLoaded». Одного обычно достаточно для всего кода, который необходимо запустить после загрузки страницы.

Если вы переместите все внутри одного обратного вызова, у вас не будет проблем:

document.addEventListener('DOMContentLoaded', function() {

  var calendar1 = document.getElementById('calendar_mini');

  var calendar_mini = new FullCalendar.Calendar(calendar1, {
    plugins: ['interaction', 'dayGrid'],
    eventClick: function(info) {
        //when clicking on events, go to date on main calendar
        calendar.gotoDate(info.event.start)
    }

  var calendar_full = document.getElementById('calendar_full');

  var calendar = new FullCalendar.Calendar(calendar_full, {
     plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
     header: {
        right: 'prevYear,prev,next,nextYear,today',
        left: 'title',
        center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
        },
       selectMirror: true,
  ...
)};
person ADyson    schedule 02.05.2019