Javascript Fullcalendar-复制事件

我用的是全日历(http://arshaw.com/fullcalendar)在我的项目中。它通过json源获取事件

我想让用户选择将日历上的一个事件复制到另一天，我想使用拖动（这是客户的要求）

但是拖动看起来像是移动一个事件，而不是复制——有没有办法获得被拖动事件的“副本”（或者复制保持在原始位置），所以看起来像是一个复制操作

我试图在eventDragStart回调中复制事件对象，但没有成功

试试这个：

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();
}

这就是我的想法。我还没有测试过这段代码。请让我知道它是如何工作的。

---

感谢

下面是我的解决方案，允许用户按住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, 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();
                } 
            },

---

我意识到这是一个老问题，但我通过搜索引擎找到了它，所以我最终得到的解决方案可能对其他人有用

我采用了稍微不同的方法，使用jQueryUIDragable，与设置外部事件的方式相同

当用户在按住ctrl键的情况下拖动事件时，会复制一个事件，这将保留原始事件并创建一个新事件，在该事件中jQuery DragTable将被删除

  // 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);
            }
          }
        });
      });
    }
  });

---

工作。

我知道这是一个老问题，但我通过搜索找到的结果可能对其他人有用

我不知道是否有可能修复你的来源

在fullcalendar.js中 dragListener的 在

dragStart

函数中，我们看到

view.hideEventsWithId（seg.footprint.eventDef.id）

是一个删除原始文件的函数

---

把它注释掉，它就会按照你想要的方式工作。

i如果你能以某种方式实现这一点，我想这篇文章中的最后一条注释可以为你提供一个起点。您将失去拖动功能。您可以接受吗？是的，我只需要复制，不需要移动事件…您可能需要使用创建开始和结束日期的深度副本。但不要克隆整个事件对象。因为它包含_id（fullCalendar分配给每个事件的id），可能会导致问题。我很想看到这一点。我们应该如何在fullCalendar v5中做到这一点。我们应该如何在最新的fullCalendar v5中做到这一点？在纯javascript中可能吗？在纯javascript中可能吗？