如何限制FullCalendar v3中的“事件拖拽”到“全天”部分?

时间:2019-07-01 19:08:28

标签: javascript fullcalendar fullcalendar-3

我希望在“时间”网格下方的此处禁用“全天”事件的拖放。

我需要阻止全天事件的拖放到该部分下面的Timegrid视图中。因此,“全天事件”应始终在“全天”部分中可拖放,而基于时间的事件应在“时基网格”部分中可拖放。

这可以用FullCalendar JS完成吗?

示例代码如下:

Codepen

HTML:

<div id='calendar'></div>

CSS:

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

JS:

$(function() {
  $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    editable: true,
    eventDurationEditable: false,
    eventLimit: true,
    nowIndicator: true, 
    now: '2019-06-09T09:25:00',
    events: [
        {
          title: 'All Day Event',
          start: '2019-06-01',
        },
        {
          title: 'Long Event',
          start: '2019-06-07',
          end: '2019-06-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-06-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-06-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2019-06-11',
          end: '2019-06-13'
        },
        {
          title: 'Meeting',
          start: '2019-06-12T10:30:00',
          end: '2019-06-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2019-06-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2019-06-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2019-06-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2019-06-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2019-06-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2019-06-28'
        }
      ]
  });
});

0 个答案:

没有答案