FullCalendar防止事件在工作时间以外丢失

Question

我正在使用FullCalendar插件，并试图使其无法删除新事件，而该事件被拖入工作时间之外。我拥有它，所以你不能拖到当前日期之前的任何日期，但无法弄清楚如何阻止说周末被拖到。

我不想要一个硬编码的解决方案，因为我必须专门为周末做一个if语句，因为如果我想增加营业时间，例如星期三在某个特定的星期，并且只允许在下午1点到下午4点之间？所以我需要一个动态的解决方案，我可以像事件一样传递一些JSON：句柄和businessHours可以处理的事件。

$(document).ready(function() { 
    /* initialize the external events 
    -----------------------------------------------------------------*/ 
    $('#external-events .fc-event').each(function() { 
     // store data so the calendar knows to render an event upon drop 
     $(this).data('event', { 
      title: $.trim($(this).text()), // use the element's text as the event title 
      stick: true // maintain when user navigates (see docs on the renderEvent method) 
     }); 
     // 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 
     }); 
    }); 
    /* initialize the calendar 
    -----------------------------------------------------------------*/ 
    $('#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 
     drop: function() { 
      // is the "remove after drop" checkbox checked? 
      if ($('#drop-remove').is(':checked')) { 
       // if so, remove the element from the "Draggable Events" list 
       $(this).remove(); 
      } 
     }, 
     /* This constrains it to today or later */ 
     eventConstraint: { 
      start: moment().format('YYYY-MM-DD'), 
      end: '2100-01-01' // hard coded must have 
     }, 
     businessHours: { 
      start: moment().format('HH:mm'), /* Current Hour/Minute 24H format */ 
      end: '17:00' // 5pm 
     } 
    }); 
}); 

这里是我当前的例子的小提琴http://jsfiddle.net/htexjtg6/

Answer 1

一个你有是因为初始化事件没有持续时间的问题 - 所以fullcalendar不知道，如果事件重叠约束和businessHours何时下降。简单设置开始/结束可以解决这个问题。

$(this).data('event', { 
    title: $.trim($(this).text()), // use the element's text as the event title 
    stick: true, // maintain when user navigates (see docs on the renderEvent method) 
    start: moment(), 
    end: moment(), 
}); 

奖金：在fullcalendar初始化设置defaultTimedEventDuration:'01:00:00',（事件的默认持续时间为2小时） - 根据本申请适用于域设定该值。

关于在不同的日子有不同的时间; BusinessHours可以是一个数组 - 。（这可能来自一个函数返回jsonarray（因为jsonArrays是完全合格的JS）看到https://fullcalendar.io/docs/display/businessHours/

businessHours: [ 
    { 
     dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday 
     start: '08:00', // 8am 
     end: '18:00' // 6pm 
    }, 
    { 
     dow: [ 4, 5 ], // Thursday, Friday 
     start: '10:00', // 10am 
     end: '16:00' // 4pm 
    } 
], 
eventConstraint:"businessHours", 

看到这个小提琴http://jsfiddle.net/htexjtg6/11/为您的代码的一个分支（有工作businessHours）