Question

我很难在基于Fullcalendar的应用程序中实现特殊行为。

该应用程序是预约调度程序：

有几种类型的约会
有时间段（背景事件），您可以在其上拖放某些约会
这些时间段只接受某些类型的约会（对于每个时间段，用户可以选择允许或不允许的类型）

为了改善用户体验，我想做的是：

当用户开始拖动约会时，接受此约会类型的时间段应变为绿色。禁止的时间段应该变成红色。
当拖动停止时，所有时间段应该变回蓝色。

我尝试使用eventDragStart和eventDragStop来实现此目的。有关示例，请参阅此JsBin：

header:{
  left: 'prev,next today',
  center: 'title',
  right: 'agendaWeek'
},
defaultDate: '2017-01-30',
defaultView: 'agendaWeek',
editable: true,

eventDragStart: function( event, jsEvent, ui, view ) { 
  let events= $('#calendar').fullCalendar( 'clientEvents');
  // allowed background events are turned into green
  // disallowed background events are turned into red
  events.forEach(function(ev) {
    if( ev.rendering == 'background') {
      if(ev.allowed) {
        ev.backgroundColor="#00FF00";
      } else {
        ev.backgroundColor="#FF0000";
      }
      // The following throws an error
      //$('#calendar').fullCalendar('updateEvent', ev);
    } 
  });
},

eventDragStop: function( event, jsEvent, ui, view ) { 
  let events= $('#calendar').fullCalendar( 'clientEvents');
  // Every backgound events are turned back into blue
  events.forEach(function(ev) {
    if( ev.rendering == 'background') {
      ev.backgroundColor="#0000FF";
      // The following throws an error
     // $('#calendar').fullCalendar('updateEvent', ev);
    }
  });
},

events: [
{
    title: 'Meeting',
    start: '2017-01-30T10:30:00',
    end: '2017-01-30T11:30:00'
  },

  {
    title: 'Allowed droppable',
    start: '2017-01-31T07:00:00',
    backgroundColor: '#0000FF',
    allowed:true,
    rendering: 'background'
  },

  {
    title: 'Disallowed droppable',
    start: '2017-01-31T10:00:00',
    backgroundColor: '#0000FF',
    allowed: false,
    rendering: 'background'
  },

但是，我似乎无法在updateEvent回调中使用eventDragStart，但会抛出错误。

在eventDragStart回调中是否有动态更新事件属性而不触发完整事件渲染？

提前致谢！

修改eventDragStart回调中的事件属性

0 个答案: