全日历外部拖放无法正常工作

Question

我正在尝试实现这样的Fullcalendar功能：将外部事件拖到日历中，然后通过ajax将事件及其标题、开始和结束日期保存到数据库中。我确实做到了将事件标题和开始日期/时间保存到DB中，但我无法解决以下几个问题：

1. 当前，保存到DB的end日期/时间与start日期/时间相同。
   • 如何使全天活动的结束日期在开始日期后24小时
   • 如何获得固定持续时间事件的确切start和end日期
2. 一旦事件被拖动并保存到DB，我就不能再拖放任何事件，直到我按下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
);
}
});

Answer 1

首先，您所经历的一些背景背景：尽管您将第二次活动标记为"从晚上8点到5点"，但这并没有实际的实际效果。如果您将可拖动项目中的任何一个放到具有时间意识的日历视图(例如周视图(中，则它将获得开始日期和时间。对于像月这样的视图，它没有一天中特定时间的概念，那么它只会获得一个开始日期，而不附带时间。

然而，在这两种情况下，都没有结束日期。通过renderEvent将事件添加到日历后，fullCalendar将为其指定默认持续时间(根据defaultAllDayEventDuration或defaultTimedEventDuration设置，视情况而定(。您可以使用它来计算名义上的结束日期(尽管事件对象实际上没有设置其end属性，除非您将forceEventDuration设置为true(。

---

现在来看一个解决方案：

如果要控制它，使特定的拖动项目具有预定义的时间，则必须在相关可拖动项目的data-属性中指定时间数据。然后，您需要在drop回调中获取这些值，方法与处理标题相同，并在创建事件时使用它们。

达到这一点需要一些技巧，尤其是在瞬间物体方面，但据我所知，它现在似乎可以做你想做的事

drop: function(date, jsEvent, ui) {
var element = $(this);
var title = $.trim(element.text());
var color = element.data("color");
var start = moment(date.format()); //lose the extended fullCalendar moment with its "ambiguously-timed" feature, which gets in the way here
var end = start.clone();
var allDay = true;
console.log(start.format(), end.format());
if (typeof element.data("starttime") !== 'undefined') {
//timed events
var starttime = moment.duration(element.data("starttime"));
var endtime = moment.duration(element.data("endtime"));
start.set({ "hour": starttime.hours(), "minute": starttime.minutes()});
end.set({ "hour": endtime.hours(), "minute": endtime.minutes()});
allDay = false;
console.log(starttime.hours());
} else {
//allday events
end.add({ days: 1 });
}
console.log("title=" + title + "&start=" + start.format() + "&end=" + end.format());
$.ajax({
url: '../../ajax/add_event.php',
data: 'title='+ title+'&start='+ start.format() +'&end='+ end.format(),
type: "POST",
success: function(json) {
alert('Added Successfully');
},
error: function() {
alert('Error');
}
});
calendar.fullCalendar(
"renderEvent",
{
title: title,
start: start,
end: end,
color: color,
allDay: allDay
},
true
);
}

演示：https://codepen.io/ADyson82/pen/GRRXwRL?editors=1010

N。B.请注意，如果用户将一个事件拖到像周视图这样的时间感知视图中，它仍然会完全按照可拖动视图中的设置创建事件，并且会忽略他们放在一天中的任何时间。这可能会让一些用户感到困惑或恼火，但我想这取决于你想要实现什么。

第页。S.我不知道你从哪里得到drop回调有一个allDay参数的想法。文件中显然没有。你不能使用它，所以我在我的版本中删除了它。