完整日历中的可变营业时间

Variable business hours in Fullcalendar

本文关键字：时间 日历      更新时间：2023-09-26

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

如何实现这一点？

若要将可变时间用于营业时间，需要使用如下所示的后台事件：

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/

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

{
  ...
  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是使其工作的重要选项。

祝你好运。

相关文章：