我已将完整日历整合到我的网站中。我的一个要求是从数据库中获取营业时间并在日历上呈现它。所以基本上每天都有两班(早上和晚上)。我需要能够创建一个营业时间数组,并从数据库中填充值。开箱即用,我可以使用以下代码来渲染常见的营业时间。
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]
},
]
如果使用完整日历的现有属性无法做到这一点,还有其他方法可以实现吗?提前谢谢。
答案 0 :(得分:9)
我还需要相同的功能。我将回购分配给
https://github.com/dtmonterrey/fullcalendar
并实施了一个适合我的解决方案。它适用于单个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]
}
]
我创建了一个拉取请求。欢迎提出建议。
示例和演示
我无法让jsfiddle工作,所以
的演示在这里
http://eo14.com/static/fullcalendar/
您可以在计算机上试用:解压缩此http://eo14.com/static/fullcalendar.zip并使用浏览器打开。
答案 1 :(得分:0)
我们可以使用以下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
反过来了,一切运作良好。