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

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

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

工作Codepen。

Answer 3

试试这个：

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 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.js 中

dragListener

在

dragStart

函数中，我们看到

view.hideEventsWithId(seg.footprint.eventDef.id)

是一个删除原来的函数。

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