我试图像这样实现Fullcalendar功能:将外部事件拖到日历上,然后通过ajax将事件及其标题,开始日期和结束日期保存到数据库中。 我确实做到了将事件标题和开始日期/时间保存到数据库中,但是我无法解决以下几个问题:
- 当前,保存到数据库的
end
日期/时间与start
日期/时间相同。- 如何将全天活动的结束日期设置为开始日期之后的24小时?
- 如何为固定持续时间的事件获取确切的
start
和end
日期?
- 一旦事件被拖动并保存到数据库中,在我按下F5键之前,我无法再拖放事件
我的HML是以下内容:
<div id='external-events'>
<div class="fc-events-container">
<div>All Day Events</div>
<div class='fc-event' data-color='#28A745'>All Day Event</div>
<div>Fixed Duration Events</div>
<div class='fc-event' data-color='#50C1E9'>Event From 8am till 5 pm</div>
</div>
</div>
jQuery:
$('#external-drag').fullCalendar({
header: {
left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'
},editable: true,droppable: true,defaultDate: new Date(),selectable: true,events: "../../ajax/get_events.php",drop: function( date,allDay,jsEvent,ui ) {
var start = date.format();
var end = date.format();
var title = $.trim($(this).text());
$.ajax({
url: '../../ajax/add_event.php',data: 'title='+ title+'&start='+ start +'&end='+ end,type: "POST",success: function(json) {
alert('Added Successfully');
},error: function() {
alert('Error');
}
});
calendar.fullCalendar('renderEvent',{
title: title,start: start,end: end,allDay: allDay
},true
);
}
});