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); 
     } 
    } 
}