在FullCalendar dayClick事件中，我可以獲取點擊日期中已存在的事件嗎？

Question

在FullCalendar dayClick事件中，我可以獲取點擊日期中已存在的事件嗎？

http://arshaw.com/fullcalendar/docs/mouse/dayClick/

讓我解釋一下我的項目 我正在寫一個簡單的PHP的網站，允許用戶對日曆添加/編輯事件一點。

• 只有單個事件可以添加到日期。
• 如果用戶點擊空白日期，新的事件彈出窗口會顯示（我使用dayclick事件）。
• 如果用戶點擊現有事件的日期，編輯事件彈出窗口將顯示（我使用eventclick事件）。

問題是當用戶點擊具有現有事件的日期的事件區域（上部區域或底部區域）以外時，它會提高dayclick而不是eventclick。 如何在日期中存在事件時觸發eventclick事件並跳過dayclick事件？

Answer 1

您的事件是存儲在客戶端還是服務器端？

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
      $('#calendar').fullCalendar('clientEvents', function(event) { 
       if(event.start <= date && event.end >= date) { 
        return true; 
       } 
       return false; 
      }); 
    } 
}); 

這會給重疊點擊的時間，並存儲在客戶端的事件：如果在客戶端，這應該，如果你想在單擊的時間事件具體工作。對於全天時段，它將使當天所有事件重疊。

如果您希望自己在該日期的所有事件，無論是否點擊allDay插槽或時間段。

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
      if(!allDay) { 
       // strip time information 
       date = new Date(date.getFullYear(), date.getMonth(), date.getDay()); 
      } 
      $('#calendar').fullCalendar('clientEvents', function(event) { 
       if(event.start <= date && event.end >= date) { 
        return true; 
       } 
       return false; 
      }); 
    } 
}); 

如果事件被存儲在服務器上，你會想在你的dayClick回調提供的日期，並用它來構建你的服務器調用獲得的任何格式，你需要的信息。

編輯如果做一個往返或試圖獲得信息的其他方式

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
      var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime(); 
      var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime(); 
      var cache = new Date().getTime(); 
      $.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache, 
       function(data) { 
        // do stuff with the JSOn data 
       } 
    } 
}); 

如果你不想來回，你也可以看看會發生什麼，說，在fullCalendar.js中refetchEvents。如果你不介意與fullCalendar樹幹不同，你可以在某處保存獲取的事件，這樣你就不會執行一堆DOM操作（取決於事件的數量，因爲它們會變大而變得笨重）。

Answer 2

您可以使用矩量庫。例如：

$('#endDate').val(moment(endDate).format('YYYY-MM-DD hh:mm:ss')); 

http://momentjs.com/docs/#/displaying/format/

Answer 3

Exested答案並沒有爲我工作，所以工作代碼：

dayClick: function (date, jsEvent, view) { 
    var count = 0; 

    date = date.toDate(); 
    var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0); 
    var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59); 

    $('#calendar').fullCalendar('clientEvents', function (event) { 
      if (event.start.toDate() >= startDate && event.start.toDate() <= endDate 
       || event.end.toDate() >= startDate && event.end.toDate() <= endDate) { 
         count++; 
        } 
       }); 
    //count - number of events on this day 
} 

Answer 4

這就是你所需要的所有活動當天在另一功能：

  var date = $('.js-calendar').fullCalendar('getDate'); 
      date = date.toDate(); 
      var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0); 
      var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59); 
      var todaysEvents = $('.js-calendar').fullCalendar('clientEvents', function(event) { 
       if (event.start.toDate() >= startDate && event.start.toDate() <= endDate 
        || event.end.toDate() >= startDate && event.end.toDate() <= endDate) { 
        return true 
       } 
      }); 

Answer 5

我剛剛遇到這個問題，自己找到解決方案f或將公共假期輸入到日曆中。我發現這是一個很好的全天活動解決方案。我希望這可以幫助其他人進一步走下坡路。

$('#calendar').fullCalendar({     
    eventClick: function (event) { 
     ShowEditScreen(event.id); 
    }, 
    dayClick: function (date) { 
     var events = $('#calendar').fullCalendar('clientEvents'); 
     for (var i = 0; i < events.length; i++) { 
      if (moment(date).isSame(moment(events[i].start))) { 
       ShowEditScreen(events[i].id); 
       break; 
      } 
      else if (i == events.length - 1) { 
       ShowCreateNew(date); 
      } 
     } 
    } 
});