Question

有没有办法在FullCalendar的议程视图中设置多个营业时间，或者使某些时间范围变灰？我在谷歌搜索了几个小时，但我没有找到任何正常的答案。

以下是我尝试的内容：

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

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

         }]

这不起作用。 fullcalendar将此数组识别为true值，并设置businesHours的默认值。

这有效：

 businessHours:

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

         }

但我希望能够定制每天的开放时间。有什么方法可以解决这个问题吗？如果我能以某种方式添加一个css类到某些时间范围，但我不知道如何获取这些时间范围。由于议程视图，渲染无效。

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 中每个插槽的背景颜色和< strong> 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'
    }],
 ...
}

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

祝你好运。

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

2 个答案: