javascript – FullCalendar可防止事件在营业时间之外丢失

前端之家收集整理的这篇文章主要介绍了javascript – FullCalendar可防止事件在营业时间之外丢失前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用FullCalendar插件并尝试制作它,因此当它被拖入工作时间之外的某些事件时,您无法删除新事件.我有它所以你不能拖动到当前日期之前的任何日期,但无法弄清楚如何防止周末被拖到.

我不想要一个硬编码的解决方案,我必须专门为周末做一个if if声明,因为如果我想在特定的一周增加营业时间,并且只允许在下午1点到4点之间?所以我需要一个动态的解决方案,我可以传递一些JSON,比如事件:句柄和businessHours也可以处理.

  1. $(document).ready(function() {
  2. /* initialize the external events
  3. -----------------------------------------------------------------*/
  4. $('#external-events .fc-event').each(function() {
  5. // store data so the calendar knows to render an event upon drop
  6. $(this).data('event',{
  7. title: $.trim($(this).text()),// use the element's text as the event title
  8. stick: true // maintain when user navigates (see docs on the renderEvent method)
  9. });
  10. // make the event draggable using jQuery UI
  11. $(this).draggable({
  12. zIndex: 999,revert: true,// will cause the event to go back to its
  13. revertDuration: 0 // original position after the drag
  14. });
  15. });
  16. /* initialize the calendar
  17. -----------------------------------------------------------------*/
  18. $('#calendar').fullCalendar({
  19. header: {
  20. left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'
  21. },editable: true,droppable: true,// this allows things to be dropped onto the calendar
  22. drop: function() {
  23. // is the "remove after drop" checkBox checked?
  24. if ($('#drop-remove').is(':checked')) {
  25. // if so,remove the element from the "Draggable Events" list
  26. $(this).remove();
  27. }
  28. },/* This constrains it to today or later */
  29. eventConstraint: {
  30. start: moment().format('YYYY-MM-DD'),end: '2100-01-01' // hard coded must have
  31. },businessHours: {
  32. start: moment().format('HH:mm'),/* Current Hour/Minute 24H format */
  33. end: '17:00' // 5pm
  34. }
  35. });
  36. });

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

最佳答案
你遇到的一个问题是因为初始化的事件没有持续时间 – 所以fullcalendar不知道事件是否与约束重叠,而businessHours是否会被删除.只需设置开始/结束即可解决此问题.

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

bonus:在fullcalendar初始化程序集中defaultTimedEventDuration:’01:00:00′,(默认事件持续时间为2小时) – 根据应用程序适用的域设置此值.

关于在不同的日子有不同的时间; BusinessHours可以是一个数组 – (可能来自返回jsonarray的函数(因为jsonArrays是完全限定的js).参见https://fullcalendar.io/docs/display/businessHours/

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

看到这个小提琴http://jsfiddle.net/htexjtg6/11/为您的代码分叉(与工作businessHours)

猜你在找的JavaScript相关文章