startDate дважды отображается в плагине FullCalendar

Question

Я использую плагин FullCalendar для одного из моих проектов. Когда пользователь нажимает на одну область календаря, он показывает всплывающее окно со входом и кнопкой «Назначение». Когда пользователь нажимает кнопку «Назначение», тогда функция makeAppointment вызывается, где я просто эхо-сигнал startDate на консоль.

В первый раз, когда пользователь нажимает кнопку «Назначение», он регистрирует выбранные дату и время. Когда пользователь выбирает «вторую дату и время» и нажимает кнопку «Назначение» во всплывающем окне, он показывает две даты и время, то есть одну предыдущую дату и время, а также одну выбранную дату и время. То же самое касается третьего и четвертого времени. Почему это имеет такое поведение и как я могу его исправить?

Вот мой код

var Calendar = { 
    init: function() { 
     $('#calendar').fullCalendar({ 
      defaultView: 'agendaWeek', 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'agendaWeek,agendaDay', 
       ignoreTimezone: false 
      }, 
      select: this.select 
     }); 
    }, 

    select: function (startDate, endDate, allDay, jsEvent, view) { 
     Calendar.Dialog.init(startDate, endDate); 
    }, 

    Dialog: { 
     init: function (startDate, endDate) { 
      this.show(); 
      $('.overlay').on('click', function() { Calendar.Dialog.close() }); 
      $('#appointmentButton').on('click', function() { Calendar.Dialog.makeAppointment(startDate, endDate) }); 
     }, 

     //show and close functions are here 

     makeAppointment: function (startDate, endDate) { 
      console.log(startDate); 
     } 
    } 
} 

Answer 1

Попробуйте проверить первый, если диалог был инициализирован, в противном случае не делать это снова.

var Calendar = { 
    init: function() { 
     $('#calendar').fullCalendar({ 
      defaultView: 'agendaWeek', 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'agendaWeek,agendaDay', 
       ignoreTimezone: false 
      }, 
      select: this.select 
     }); 
    }, 

    initialized: false, 

    select: function (startDate, endDate, allDay, jsEvent, view) { 
     if (this.initialized === false) { 
      this.initialized = true; 
      Calendar.Dialog.init(startDate, endDate); 
     } 
    }, 

    Dialog: { 
     init: function (startDate, endDate) { 
      this.show(); 
      $('.overlay').on('click', function() { Calendar.Dialog.close() }); 
      $('#appointmentButton').on('click', function() { Calendar.Dialog.makeAppointment(startDate, endDate) }); 
     }, 

     //show and close functions are here 

     makeAppointment: function (startDate, endDate) { 
      console.log(startDate); 
     } 
    } 
}