Программно изменить дату полного календаря 4 - PullRequest
Новая
       18

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

0 голосов
/ 02 мая 2019

Я использую fullcalendar 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

1 Ответ

0 голосов
/ 02 мая 2019

Проблема в том, что переменная с именем "calendar" не находится в области видимости при использовании ее в обратном вызове, поэтому она не определена.Его область действия ограничена обратным вызовом «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,
  ...
)};
...