我在我的项目中使用 Fullcalendar (http://arshaw.com/fullcalendar)。它通过 json 源获取事件。
我想为用户提供将日历上的一个事件复制到另一天的选项 - 我想为此使用拖动(嗯,这是客户的要求)。
但是拖动似乎是移动一个事件,而不是复制 - 有没有办法获得被拖动事件的“副本”(或复制留在原始位置),所以它看起来像一个复制操作?
我试图在 eventDragStart 回调中复制事件对象,但没有成功。
我在我的项目中使用 Fullcalendar (http://arshaw.com/fullcalendar)。它通过 json 源获取事件。
我想为用户提供将日历上的一个事件复制到另一天的选项 - 我想为此使用拖动(嗯,这是客户的要求)。
但是拖动似乎是移动一个事件,而不是复制 - 有没有办法获得被拖动事件的“副本”(或复制留在原始位置),所以它看起来像一个复制操作?
我试图在 eventDragStart 回调中复制事件对象,但没有成功。
下面是我的解决方案,允许用户按住 shift 键复制事件。请注意,这实际上是在移动原始事件并将副本保留在原始位置。
我从这个参考开始并创建了以下内容:
//Before the fullCalendar object
var copyKey = false;
$(document).keydown(function (e) {
copyKey = e.shiftKey;
}).keyup(function () {
copyKey = false;
});
//then inside the fullCalendar object
eventDragStart: function (event, jsEvent, ui, view) {
if (!copyKey) return;
var eClone = {
title: event.title,
start: event.start,
end: event.end
};
$('#calendar').fullCalendar('renderEvent', eClone);
},
尝试这个:
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
// Create an event object and copy at least the start date and the title from event
var eventClone = {
title:event.title,
start: event.start,
end: event.end
};
// Render new event with new event object
$('#calendar').fullCalendar('renderEvent', eventClone);
// Revert the changes in parent event. To move it back to original position
revertFunc();
}
这只是想法。我没有测试过这段代码。请让我知道它是如何工作的。谢谢
我意识到这是一个老问题,但是我通过搜索引擎找到了它,所以我最终得到的解决方案可能对其他人有用。
我采用了稍微不同的方法并使用了 jQuery UI Draggable,与设置外部事件的方式相同。
当用户在按住 ctrl 键的情况下拖动事件时,会复制一个事件,这会将原始事件留在原处并创建一个新事件,其中 jQuery 可拖动对象被放置。
// used to track whether the user is holding the control key
let ctrlIsPressed = false;
function setEventsCopyable(isCopyable) {
ctrlIsPressed = !ctrlIsPressed;
$("#calendar").fullCalendar("option", "eventStartEditable", !isCopyable);
$(".fc-event").draggable("option", "disabled", !isCopyable);
}
// set events copyable if the user is holding the control key
$(document).keydown(function(e) {
if (e.ctrlKey && !ctrlIsPressed) {
setEventsCopyable(true);
}
});
// if control has been released stop events being copyable
$(document).keyup(function(e) {
if (ctrlIsPressed) {
setEventsCopyable(false);
}
});
$("#calendar").fullCalendar({
defaultView: "basicWeek",
events: [
{
title: "Event 1",
start: moment(),
end: moment().add(1, "d")
},
{
title: "Event 2",
start: moment().add(1, "d"),
end: moment().add(2, "d")
}
],
editable: true,
droppable: true,
eventAfterAllRender(event, element, view) {
// make all events draggable but disable dragging
$(".fc-event").each(function() {
const $event = $(this);
// store data so the calendar knows to render an event upon drop
const event = $event.data("fcSeg").footprint.eventDef;
$event.data("event", event);
// make the event draggable using jQuery UI
$event.draggable({
disabled: true,
helper: "clone",
revert: true,
revertDuration: 0,
zIndex: 999,
stop(event, ui) {
// when dragging of a copied event stops we must set them
// copyable again if the control key is still held down
if (ctrlIsPressed) {
setEventsCopyable(true);
}
}
});
});
}
});
工作代码笔。
在上述答案的帮助下,我设法解决了这个问题:
eventDrop: function (event, delta, revertFunc) {
if (copyKey) {
var eClone = {
title: event.title,
start: event.start,
end: event.end,
id: createGuid(),
playlistId: event.playlistId,
volume: event.volume,
backgroundColor: event.backgroundColor,
allDay: false
};
$('#calendar').fullCalendar('renderEvent', eClone, true);
revertFunc();
}
},
我知道这是一个老问题,但我通过搜索找到的结果可能对其他人有用
我不知道是否可以修复您的来源。
在 fullcalendar.jsdragListener
的dragStart
函数中,我们看到那view.hideEventsWithId(seg.footprint.eventDef.id)
是一个去掉原来的函数。
将其注释掉,它将按您的意愿工作。