javascript - Javascript Fullcalendar - 复制事件

Question

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

我想为用户提供将日历上的一个事件复制到另一天的选项 - 我想为此使用拖动（嗯，这是客户的要求）。

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

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

Answer 1

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

Answer 2

尝试这个：

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

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

Answer 3

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

我采用了稍微不同的方法并使用了 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);
            }
          }
        });
      });
    }
  });

工作代码笔。

Answer 4

在上述答案的帮助下，我设法解决了这个问题：

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

Answer 5

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

我不知道是否可以修复您的来源。

在 fullcalendar.jsdragListener 的dragStart函数中，我们看到那view.hideEventsWithId(seg.footprint.eventDef.id)是一个去掉原来的函数。

将其注释掉，它将按您的意愿工作。