外部事件拖入FullCalendar

时间:2016-01-22 19:02:16

标签: jquery html css fullcalendar

尝试将外部事件拖入fullcalendar。我遇到了一些问题。

用户可以将外部事件拖入日历(两种情况)

  

案例1:如果他拖到过去的日期(我的意思是小于当前日期),则提示无法添加事件。

     

案例2:如果他将事件拖到未来的日期,事件将会粘在日历上。

我遇到第二种情况的问题,不能将事件粘贴到日历中。

这是我的代码,

HTML

<div id='wrap'>
  <div id='external-events'>
    <div id='external-events-listing'>
      <h4>Draggable Events</h4>
      <div class='fc-event'>My Event 1</div>
      <div class='fc-event'>My Event 2</div>
      <div class='fc-event'>My Event 3</div>
      <div class='fc-event'>My Event 4</div>
      <div class='fc-event'>My Event 5</div>
    </div>
    <p>
      <input type='checkbox' id='drop-remove' checked='checked' />
      <label for='drop-remove'>remove after drop</label>
    </p>
  </div>
  <div id='calendar'></div>
  <div style='clear:both'></div>
</div>

我的 JS

$('#external-events .fc-event').each(function() {
  var externalEvents = {
    title: $.trim($(this).text())
  }; // creating event object and makes event text as its title
  $(this).data('externalEvents', externalEvents); //saving events into DOM
  // make the event draggable using jQuery UI
  $(this).draggable({
    zIndex: 999,
    revert: true, // will cause the event to go back to its
    revertDuration: 0 //  original position after the drag
  });
});
$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar
  dragRevertDuration: 0,
  theme: true,

  drop: function(date, jsEvent) {
    // is the "remove after drop" checkbox checked?
    if (date > new Date()) {
      var externalEvents = $(this).data('externalEvents');
      alert(externalEvents.title);
      $(this).data('event', {
        title: externalEvents.title,
        start: moment(date).format('HH:mm:ss'),
        allDay: false,
        stick: true
      });
      if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
      }
    } else {
      alert("can't add event");
    }
  },
});

我的输出为enter image description here

任何人都可以帮我调试一下。

0 个答案:

没有答案