更新时间:2023-10-12 20:48:46
我用fullcalendar广泛,是的,在特定日期添加事件是它的一个核心特征。
你需要了解事件对象的结构(见 http://arshaw.com/fullcalendar/文档/ EVENT_DATA / Event_Object / )专门设置了启动
来的开始日期/时间的Unix时间戳,要么将其标记为全天事件 allDay =真正的
或设置结束
时间戳。
I've used fullcalendar extensively and yes, adding events on specific dates is a core feature of it.
You'll need to understand the event object structure(see http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) specifically you set the start
to the unix timestamp of the start date/time and either mark it as an all day event allDay = "true"
or set end
timestamp.
正如你所提到的Ajax,填充日历事件的一种方法是通过JSON加载它们,你可以这样做:
As you mentioned Ajax, one way to populate the calendar with events is to load them via JSON which you can do like this:
$('#日历)。fullCalendar({
事件:/myfeed.php
});
$('#calendar').fullCalendar({
events: '/myfeed.php'
});
使用 myfeed.php
返回JSON结构完整的事件对象。
With myfeed.php
returning a json structure full of the event objects.
下面是一个完整的例子如何设置各种选项的日历
Here's a full example of how to setup the calendar with various options
//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();
}
}
});