如何在 fullCalendar 中添加多个营业时间？

Question

有什么方法可以设置多个营业时间，或者在 FullCalendar 的议程视图中将某些时间范围变灰吗？我在 google 中搜索了几个小时，但没有找到任何有效的答案。

这是我尝试过的方法：

businessHours:
        [
        {
         start: '08:00', 
         end: '17:00', 
         dow: [ 1,2,3,4,5 ]

         },
         {
         start: '10:00', 
         end: '16:00', 
         dow: [ 6 ]

         }]

这是行不通的。 fullcalendar 将此数组识别为真值，并设置默认值 businesHours。

这个有效：

 businessHours:

        {
         start: '08:00', 
         end: '17:00', 
         dow: [ 1,2,3,4,5 ]

         }

但我希望能够自定义每天的开放时间。有什么办法可以解决这个问题吗？如果我能以某种方式将 css class 添加到某些时间范围内就可以了，但我不知道如何获取这些时间范围。由于议程视图，渲染不起作用。

Answer 1

我找到了解决办法。这不是解决这个问题的最佳方法，但它很容易理解和实施，直到我们在即将到来的更新中没有获得更可定制的 businessHours() 函数。

代码：

events: [
    {
        start: '00:00:00+02:00',
        end: '08:00:00+02:00',
        color: 'gray',
        rendering: 'background',
        dow: [1,2,3,4,5]
    },

    {
        start: '16:00:00+02:00',
        end: '24:00:00+02:00',
        color: 'gray',
        rendering: 'background',
        dow: [1,2,3,4,5]
    },

    {
        start: '00:00:00+02:00',
        end: '8:00:00+02:00',
        color: 'gray',
        rendering: 'background',
        dow: [6]
    },

    {
        start: '12:00:00+02:00',
        end: '24:00:00+02:00',
        color: 'gray',
        rendering: 'background',
        dow: [6]
    }
]

这会将背景事件放在日历中，这些事件不可点击，看起来像 businessHours() 的灰色，并且会更改 agendaWeek[= 中每个插槽的背景颜色22=] 和 agendaDay 从 00:00 到 08:00、16:00 到 24:00（从星期一到星期五 - dow:[1,2,3,4,5] )，以及从 00:00 到 08:00、12:00 到 24:00（星期六 - dow:[6]）。

Answer 2

您可以将每个营业时间添加为一个事件。 FullCalendar 使用相同的结构来填充 businessHours 选项：

{
  ...
  events: [
    // business hours 1
    {
        className: 'fc-nonbusiness',
        start: '09:00',
        end: '17:00',
        dow: [1, 2, 3, 4], // monday - thursday
        rendering: 'inverse-background'
    },
    // business hours 2
    {
        className: 'fc-nonbusiness',
        start: '10:00',
        end: '15:00',
        dow: [6], // saturday
        rendering: 'inverse-background'
    }],
 ...
}

注意：这个events中重要的options是className:'fc-nonbusiness和rendering:'inverse-background'。

祝你好运。

如何在 fullCalendar 中添加多个营业时间？

How to add multiple business hours in fullCalendar?

fullcalendar