Question

我使用新版本的fullcalendar更新了我的应用，我想复制/粘贴拖放的事件。

我在我的计划对象中将editable选项设置为true，并且拖放确实起作用，但是我希望它可以复制事件而不是替换事件。

我当前正在尝试编辑事件eventDragStart以便创建我的事件的克隆。

var jsonEvents = <?php echo json_encode($arrayEvenements); ?>;
var planning = {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
    defaultView: 'timeGridWeek',
    allDaySlot: false,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    editable: true,
    events : jsonEvents,
    eventClick : function goTo(info){
      // Some link to my event page
    },
    eventDragStart : function cloneEvent(info) {
      // Where I want the magic to happen I guess ???
        var evenement = info.event;
        console.log(evenement);
    },
    eventDragStop : function upadateEvent(info) {
        var evenement = info.event;
        console.log(info)
    }
}

var calendarEl = $('#calendar1')[0]
var calendar = new FullCalendar.Calendar(calendarEl, planning)
calendar.render()

我想要克隆我的拖放事件我有一个无故拖拽事件，

Answer 1

对于克隆事件，我认为在eventDragStart中尝试执行任何操作为时已晚，该事件已经开始移动。

如果您不必担心事件被拖动和调整大小，而只想在拖动时克隆事件，则解决方案非常简单。只需将每个事件视为外部事件即可。使用这种方法，可编辑的内容就不正确。

<form id='CURRENT'>
  <button id='BUTTON' name='tgt' type='button' value="button">CLICK EVENT</button><br>
  <input id='TEXT' name='tgt' type='text' placeholder='INPUT EVENT'><br>
  <input id='RADIOA' name='tgt' type='radio' value="A"> A
  <input id='RADIOB' name='tgt' type='radio' value="B"> B<br>

  <output id='out'></output>
</form>

Working example

但是，如果确实需要拖动事件并调整其大小，则需要某种方式来区分常规拖动和外部拖动。在v3中，我曾在按住控制键并开始拖动时复制事件。在v4中似乎存在此问题，我计划对此进行进一步研究，但与此同时，在按住Shift键的同时我有一个有效的示例。

如果拖动时不按住shift键，事件将被移动；如果拖动时按住shift，则事件将被克隆。

let containerEl = document.getElementById("calendar");
let calendarEl = document.getElementById("calendar");

new Draggable(containerEl, {
  itemSelector: ".fc-event",
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText
    };
  }
});

var calendar = new Calendar(calendarEl, {
  plugins: ["dayGrid", "interaction"],
  defaultView: "dayGridMonth",
  events: [
    {
      title: "Test 1",
      start: "2019-04-01"
    },
    {
      title: "Test 2",
      start: "2019-04-03",
      end: "2019-04-05"
    },
    {
      title: "Test 3",
      start: "2019-04-22",
      end: "2019-04-25"
    },
    {
      title: "Test 4",
      start: "2019-04-19"
    }
  ]
});

calendar.render();

Working example

如何复制拖放事件？

1 个答案: