每天两班制的多个工作时间

Mutliple business hours in full calendar with two shifts each day

本文关键字：工作 时间 两班 每天      更新时间：2023-09-26

我已经将完整的日历集成到我的网站中。我的一个要求是有营业时间从数据库中获取，并在日历上呈现它。所以基本上每天都有两个班次(早上和晚上)。我需要能够创建一个营业时间数组，其值从数据库中填充。开箱即用，我可以使用下面的代码来呈现一个公共的营业时间。

businessHours:
  {
    start: '10:00:00',
    end: '16:00:00',
    dow: [0,1,2,3,4,5,6]
  },

我想实现这样的东西:

businessHours:[
{
  start: '10:00:00',
  end: '13:00:00',
  dow: [0]
},
{
  start: '14:00:00',
  end: '19:00:00',
  dow: [0]
},
{
  start: '09:00:00',
  end: '12:00:00',
  dow: [1]
},
{
  start: '12:30:00',
  end: '18:00:00',
  dow: [1]
},
]

如果这是不可能与完整日历的现有属性，有没有其他实现这一点?

我也需要相同的功能。我将repo fork到

https://github.com/dtmonterrey/fullcalendar

并实现了一个适合我的解决方案。它可以使用单个businessshours定义或businessshours定义数组(如您尝试的示例)。

的例子:

    businessHours:[ 
        {
            start: '09:00',
            end: '13:00',
            dow: [1, 2]
        },
        {
            start: '14:00',
            end: '16:00',
            dow: [1, 2]
        },
        {
            start: '10:00',
            end: '19:00',
            dow: [4]
        },
        {
            start: '06:00',
            end: '10:30',
            dow: [6]
        },
        {
            start: '13:00',
            end: '17:00',
            dow: [6]
        },
        {
            start: '20:00',
            end: '23:00',
            dow: [6]
        }
    ]

我已经创建了一个拉请求。欢迎提出建议。

示例和演示

我无法让jsfiddle工作，所以

的演示http://jsfiddle.net/t7aczbdt/

这里

http://eo14.com/static/fullcalendar/

你可以在你的电脑上试试:解压这个http://eo14.com/static/fullcalendar.zip然后用浏览器打开。

我们可以添加每个我们的business hours作为events与以下options -这是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'
    }],
 ...
}

注魔法是由className : fc-nonbusiness完成的，这是反直觉的;但是，选项rendering:'inverse-background可以逆转这种情况，并且一切正常。

好运。

相关文章：