![](/img/trans.png)
[英]How to convert the start date and end date of an event object in FullCalendar
[英]how to get start and end date of external dragged and dropped event on fullcalendar
我有一個關於全日歷拖放功能的快速問題。
這是我的JS代碼
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
right: 'title'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
console.log(originalEventObject.title);
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
// console.log(originalEventObject.start);
// console.log(originalEventObject.end);
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
我想創建一個名為var dragged_event的新變量,每個拖放事件的外觀如下所示。
var dragged_event = "Name: " + originalEventObject.title + ", Start: " + ??? + ", End: " + ???
所以輸出看起來類似
console.log(dragged_event);
//Name: Birthday Start: Mar 06 2014 End: Mar 08 2014
目前,我無法確定如何獲取拖動事件的開始日期和結束日期。 有人可以幫我解決這個問題嗎?
感謝您的閱讀。
您可以嘗試類似
drop: function (date, allDay) {
console.clear();
console.log("dropped");
console.log(date.format());
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
var end = date.clone().add(defaultDuration); // on drop we only have date given to us
console.log('end is ' + end.format());
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
得到這個結果
或遵循此示例。
有過載
下降:功能(日期,全天)
至極
drop:函數(開始,結束,全天)
開始和結束日期存儲在“開始”和“結束”變量中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.