Fullcalendar 中的可变营业时间答案

【问题标题】：Variable business hours in FullcalendarFullcalendar 中的可变营业时间
【发布时间】：2016-07-06 11:18:04
【问题描述】：

我正在使用 FullCalendar，并且我正在将它用于具有不同时间的业务

周一、周二、周三、周五 09:00 - 17:00。

星期四是 09:00 - 19:00。

businessHours: {
    start: '09:00', // a start time (10am in this example)
    end: '17:00', // an end time (6pm in this example)
    dow: [ 1, 2, 3, 5]
        // days of week. an array of zero-based day of week integers (0=Sunday)
        // (Monday-Thursday in this example)
}

http://fullcalendar.io/docs/display/businessHours/

如何做到这一点？

【问题讨论】：

您到底想用 Fullcalendar 创建什么？到目前为止你有什么？
你试过使用对象数组吗？
我只是在玩，看看我能用它做什么。我想知道我是否可以开箱即用。我将玩弄对象数组，甚至制作一个新对象。一分钟到了行尸走肉的时间。谢谢大家。
@Blazemonger 这应该是这样做的方法，但目前不支持。实现这一点的最佳方法是使用后台事件。看到这个答案：stackoverflow.com/a/27695472/728393

标签： javascript fullcalendar

【解决方案1】：

要将可变时间用于营业时间，您需要使用这样的后台事件：

events:
[
    {
        id:    'available_hours',
        start: '2015-1-13T8:00:00',
        end:   '2015-1-13T19:00:00',
        rendering: 'background'
    },
    {
        id:    'available_hours',
        start: '2015-1-14T8:00:00',
        end:   '2015-1-14T17:00:00',
        rendering: 'background'
    },
    {
        id:    'work',
        start: '2015-1-13T10:00:00',
        end:   '2015-1-13T16:00:00',
        constraint: 'available_hours'
    }
]

注意在最后一个事件中它已经填写了约束？这表示这只能放置在可用的时间段内。使用约束条件，您可以制定灵活的工作时间。

有关详细信息，请参阅此链接， http://fullcalendar.io/docs/event_ui/eventConstraint/

【讨论】：

【解决方案2】：

试试这个 - 为每个工作时间添加一个事件，如下所示：

{
  ...
  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'
    }],
 ...
}

注意：className 和 rendering 是实现此功能的重要选项。

祝你好运。

【讨论】：