jquery JavaScript Fullcalendar -复制事件

c6ubokkw  于 11个月前  发布在  jQuery
关注(0)|答案(5)|浏览(93)

我在我的项目中使用Fullcalendar(http://arshaw.com/fullcalendar)。它通过json源代码获取事件。
我想给予用户选项,将日历上的一个事件复制到另一天-我想使用拖动(嗯,这是客户端的要求)。
但是拖动看起来像是移动一个事件,而不是复制--有没有办法得到被拖动的事件的“副本”(或者复制留在原来的地方),所以它看起来像一个复制操作?
我尝试在eventDragStart回调中复制事件对象,但它不起作用。

9fkzdhlc

9fkzdhlc1#

下面是我的解决方案,允许用户按住Shift键复制事件。* 请注意,这实际上是移动原始事件并在原始位置留下副本。*
我从this reference开始,创建了以下代码:

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

字符串

unftdfkk

unftdfkk2#

我意识到这是一个老问题,但我发现它通过搜索引擎,所以我最终的解决方案可能会对其他人有用。
我采用了一种稍微不同的方法,使用了jQuery UI Draggable,这与设置外部事件的方式相同。
当用户在按住ctrl键的情况下拖动事件时,将复制一个事件,这会将原始事件保留在原位,并在jQuery draggable被删除的位置创建一个新事件。

// 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

2lpgd968

2lpgd9683#

试试这个:

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

字符串
这只是一个想法。我还没有测试过这段代码。我希望它能工作。

ycggw6v2

ycggw6v24#

我设法绕过这个与上述答案的帮助:

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

字符串

e4yzc0pl

e4yzc0pl5#

我知道这是一个老问题,但我通过搜索找到的结果可能对其他人有用
我不知道是否有可能修复你的线人。
dragListener函数中,我们看到view.hideEventsWithId(seg.footprint.eventDef.id)是一个删除原始内容的函数。
把它注解掉,它就可以按你想要的那样工作了。

相关问题