jQuery日曆：如何在特定日期添加可點擊事件？

Question

我正在使用jquery完整日曆http://arshaw.com/fullcalendar來顯示會議。

我只是想確認，它可以添加一個事件（讓我們一使用PHP AJAX創建一個新的會議

）使用這個特定的日期？

Answer 1

我已經廣泛使用fullcalendar，是的，在特定日期添加事件是它的核心功能。 您需要了解事件對象結構（請參閱http://arshaw.com/fullcalendar/docs/event_data/Event_Object/），具體而言，您將start設置爲開始日期/時間的unix時間戳，並將其標記爲全天事件allDay = "true"或設置end時間戳。

至於你提到的Ajax，用事件來填充日曆的一種方法是通過JSON加載它們，你可以這樣做：

$('#calendar').fullCalendar({ events: '/myfeed.php' });

隨着myfeed.php返回一個JSON結構完整的事件對象的。

---

這裏有一個完整的例子如何設置與我假設你要添加事件的各種選項

//Initialise the calendar 
$('#calendar').fullCalendar({ 
    header: { left: 'title', center: '', right: 'today agendaDay,agendaWeek,month prev,next'}, 
    editable: true, 
    showTime: true, 
    allDayDefault: false, 
    defaultView: 'agendaDay', 
    firstHour: 8, 
    eventColor: '#23478A', 
    eventBorderColor:'#000000', 
    eventTextColor:'#ffffff', 
    //eventBackgroundColor:, 
    theme: true, //enables jquery UI theme 

    eventSources: [ 
     '/myfeed.php' 
    ], 

    //this is when the event is dragged and dropped somewhere else 
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) 
    { 
     //do something... 
    }, 

    //this is when event is resized in day/week view 
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) 
    { 
     //do something 
    }, 

    eventClick: function(calEvent, jsEvent, view) 
    {   
     //do something 
    }, 

    eventRender: function(event, element, view) 
    { 
     //redo the title to include the description 
     element.find(".fc-event-title").html(event.title + ": <span>" + event.description + "</span>"); 
    }, 

    loading: function(bool) 
    { 
     if (bool) 
     { 
      $("#loading").show(); 
     } 
     else 
     { 
      $('#loading').hide(); 
     } 
    } 
}); 

Answer 2

日曆時的某一天用戶點擊（以月視圖）或時隙（以日/周視圖）。如果是這樣，您可以使用select和eventClick回調在日曆上添加和提取事件。

檢查此琴： http://jsfiddle.net/100thGear/xgSTr/

這包含了jQuery UI的對話框到FullCalendar，也繼承了所選日期到jQuery UI的日期選擇器的便利！

讓我知道這是否有幫助。