Javascript 全日历中的多个工作时间,每天两班

Javascript 全日历中的多个工作时间,每天两班,javascript,fullcalendar,Javascript,Fullcalendar,我已将完整日历集成到我的网站中。我的一个要求是让工作时间从数据库中获取数据并将其呈现在日历上。所以基本上每天有两班(早班和晚班)。我需要能够创建一个包含从数据库填充的值的工作时间数组。开箱即用,我能够使用下面的代码呈现常见的工作时间 businessHours: { start: '10:00:00', end: '16:00:00', dow: [0,1,2,3,4,5,6] }, 我想实现这样的目标: businessHours:[ { start: '

我已将完整日历集成到我的网站中。我的一个要求是让工作时间从数据库中获取数据并将其呈现在日历上。所以基本上每天有两班(早班和晚班)。我需要能够创建一个包含从数据库填充的值的工作时间数组。开箱即用,我能够使用下面的代码呈现常见的工作时间

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]
},
]

如果完整日历的现有属性无法实现这一点,是否还有其他方法可以实现这一点?提前谢谢。

我也需要同样的功能。我把回购协议交给了

并实施了一个适合我的解决方案。它可以与单个businessHours定义或一系列businessHours定义一起使用(如您尝试的示例)

例如:

    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]
        }
    ]
我已经创建了一个拉取请求。欢迎提出建议

示例和演示

我无法让JSFIDLE工作,因此

在这儿吗

您可以在您的计算机上尝试:解压缩此文件并用浏览器打开。

我们可以使用以下
选项将每个
营业时间
添加为
事件
-这是
完整日历
用于填充
营业时间
选项的标准选项:-

{
  ...
  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'
    }],
 ...
}
注意魔术是由反直觉的
类名:fc nonbusiness
完成的;但是,通过选项
rendering:'inverse-background
可以实现相反的效果,所有这些都很好


祝你好运

任何示例JSFIDLE都应该非常有用:D@user1744973添加了示例和演示。谢谢你的建议。谢谢阿尔维斯,这真的很有帮助。如何在最新版本中使用它?我发现答案使用了selectConstraint和eventConstraint选项,以防止在非工作时间(从完整日历2.2版)单击事件。谢谢:)