全日历营业时间答案

【问题标题】：Full calendar business hours全日历营业时间
【发布时间】：2015-02-25 14:30:31
【问题描述】：

我正在尝试使用营业时间选项，但我无法反映更改。

我想显示多个营业时间。代码如下：

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-11-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    businessHours:
        [
            {
                start: '10:00', // a start time (10am in this example)
                end: '12:00', // an end time (12pm in this example)
                dow: [1, 2, 3, 4]
                // days of week. an array of zero-based day of week integers (0=Sunday)
                // (Monday-Thursday in this example)
            },
            {
                start: '12:00', // a start time (12pm in this example)
                end: '18:00', // an end time (6pm in this example)
                dow: [1, 2, 3, 4]
                // days of week. an array of zero-based day of week integers (0=Sunday)
                // (Monday-Thursday in this example)
            }]
});

【问题讨论】：

标签： fullcalendar

【解决方案1】：

像这样

businessHours:
    {

            start: '11:00',
            end:   '12:00',
            dow: [ 1, 2, 3, 4, 5]
    },

为了对不同的班次使用不同的时间 -> 使用后台事件

events:
[
    {
        id:    'available_hours',
        start: '2015-1-13T8:00:00',
        end:   '2015-1-13T19: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/

根据您使用日历的方式，您可以采用多种不同的方式来解决此问题。希望约束的灵活性将帮助您完成所需的工作。

很高兴这个功能终于出现了！

【讨论】：

谢谢兄弟，我试过它的工作正常，但它不能每天工作多个工作时间（我的意思是轮班） shift1 : 8 -> 12 shift2 : 14 -> 20 var businessHours = [{ "开始": '08:00:00', "结束": '12:00:00',"dow": [1, 2, 3, 4] },{ "开始": '14:00:00 ', "end": '20:00:00', "dow": [1, 2, 3, 4] }];它不工作
我建议利用背景事件。在文档中查看它们。它们的工作方式更像事件，但您可以将它们附加到其他事件的功能上。如果可以的话，我会把它添加到我的答案中。
v4 中的 api 有点不同。使用startTime、endTime 和daysOfWeek 而不是dow。 see breaking changes
@DHFW 我有同样的要求...你能回答你是如何解决的吗？
@joy 当然。这适用于 FullCalendar.io 版本 5.3.0：` [ { "startTime": "10:30", "endTime": "16:30", "daysOfWeek": [ 3, 4, 5 ] }, { "startTime ": "9:00", "endTime": "16:30", "daysOfWeek": [ 1, 2, 3, 4, 5 ] } ] `

【解决方案2】：

我必须显示固定的 8AM 到 8PM 的 FullCaledar 时间段，所以我做了一些研发，并应用了以下选项，它似乎工作正常！！！干杯。

jq('#calendar').fullCalendar({
        header: {
          left: 'prev,next',
          center: 'title',
          right: 'today,month,agendaWeek,resourceDay'
        },
        defaultView: 'resourceDay',
        allDaySlot: false,
        axisFormat: 'h:mm A',
        timeFormat: 'h:mm T',
        minTime: '08:00:00',
        maxTime: '20:00:00',

使用， minTime: '08:00:00', 最大时间：'20:00:00'

谢谢！！！

【讨论】：

【解决方案3】：

另一方面，您可以定义工作时间和天数。

businessHours: [{
                        daysOfWeek: [1, 2, 3, 6, 7],
                        startTime: '08:00',
                        endTime: '23:00'
                    },
                    {
                        daysOfWeek: [4],
                        startTime: '08:00',
                        endTime: '16:00'
                    },
                    {
                        daysOfWeek: [5],
                        startTime: '15:00',
                        endTime: '23:00'
                    }
                ]

希望对您有所帮助。

【讨论】：

【解决方案4】：

在版本 4 中：

businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
  daysOfWeek: [ 1, 2, 3, 4 ], // Monday - Thursday

  startTime: '10:00', // a start time (10am in this example)
  endTime: '18:00', // an end time (6pm in this example)
}

您还可以将您的营业时间声明拆分为一组对象，以进行额外控制：

businessHours: [ // specify an array instead
  {
    daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    startTime: '08:00', // 8am
    endTime: '18:00' // 6pm
  },
  {
    daysOfWeek: [ 4, 5 ], // Thursday, Friday
    startTime: '10:00', // 10am
    endTime: '16:00' // 4pm
  }
]

在版本 3 中：

businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
  dow: [ 1, 2, 3, 4 ], // Monday - Thursday

  start: '10:00', // a start time (10am in this example)
  end: '18:00', // an end time (6pm in this example)
}

您还可以将您的营业时间声明分成几部分以进行额外控制（在 v2.9.1 中添加）：

businessHours: [ // specify an array instead
  {
    dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    start: '08:00', // 8am
    end: '18:00' // 6pm
  },
  {
    dow: [ 4, 5 ], // Thursday, Friday
    start: '10:00', // 10am
    end: '16:00' // 4pm
  }
]

【讨论】：