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的日期选择器的便利！

让我知道这是否有帮助。