Question

我正在使用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/

如何实现这一目标？

Answer 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/

Answer 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是实现这一目标的重要选项。

祝你好运。

Fullcalendar中的可变营业时间

2 个答案: