Javascript FullCalendar定期事件无法正常工作
我正在使用FullCalendar来尝试显示事件的年度列表和事件的日历视图。两者都有相同代码结构的问题。(因此,我以列表一为例。 我正在尝试设置定期事件的结束日期。它们可以在一周中的多天显示(本例仅为周六)。我有两种可能的解决方案无法满足我的需要。 解决方案一如下:Javascript FullCalendar定期事件无法正常工作,javascript,fullcalendar,recurring,Javascript,Fullcalendar,Recurring,我正在使用FullCalendar来尝试显示事件的年度列表和事件的日历视图。两者都有相同代码结构的问题。(因此,我以列表一为例。 我正在尝试设置定期事件的结束日期。它们可以在一周中的多天显示(本例仅为周六)。我有两种可能的解决方案无法满足我的需要。 解决方案一如下: <script> $(document).ready(function() { $('#calendar').fullCalendar({ defaultView: 'l
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'listYear',
views: {
listYear: { buttonText: 'Diary Dates' }
},
header: {
left: '',
center: '',
right: 'prev title next'
},
events: [{
title : "Shoalhaven Heads Seafood and Fresh Produce Fair",
url: 'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
backgroundColor: '#dd4242',
borderColor: '#dd4242',
start: '08:00',
end: '13:00',
dow: [6],
ranges: [{
start: '2018-04-21T08:00:00',
end: '2018-11-03T13:00:00',
}],
},
{
title : "BOWIE UNZIPPED at the BOWLO!",
url: 'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
backgroundColor: '',
borderColor: '',
start: '2018-04-27',
allDay: true,
}]
});
});
</script>
$(文档).ready(函数(){
$(“#日历”).fullCalendar({
defaultView:'listYear',
观点:{
listYear:{buttonText:'日记日期'}
},
标题:{
左:'',
中心:'',
右:“上一个标题下一个”
},
活动:[{
标题:“Shoalhaven负责海鲜和新鲜农产品交易会”,
网址:'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
背景颜色:“#dd4242”,
边框颜色:'#dd4242',
开始:“08:00”,
完:"13时",
道琼斯指数:[6],
范围:[{
开始:“2018-04-21T08:00:00”,
完:“2018-11-03T13:00:00”,
}],
},
{
标题:“鲍伊在保龄球馆拉开拉链!”,
网址:'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
背景颜色:'',
边框颜色:“”,
开始:“2018-04-27”,
全天:没错,
}]
});
});
这成功地在我想要的日子里产生了重复事件。但是这些范围不起作用,因为它们在每周六打印,直到时间结束(应该只到今年11月)
$(文档).ready(函数(){
$(“#日历”).fullCalendar({
defaultView:'listYear',
观点:{
listYear:{buttonText:'日记日期'}
},
标题:{
左:'',
中心:'',
右:“上一个标题下一个”
},
活动:[{
标题:“Shoalhaven负责海鲜和新鲜农产品交易会”,
网址:'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
背景颜色:“#dd4242”,
边框颜色:'#dd4242',
开始:“2018-04-21T08:00:00”,
完:“2018-11-03T13:00:00”,
道琼斯指数:[6],
},
{
标题:“鲍伊在保龄球馆拉开拉链!”,
网址:'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
背景颜色:'',
边框颜色:“”,
开始:“2018-04-27”,
全天:没错,
}]
});
});
然后,我尝试了另一个选项,将日期添加到开始/结束参数中。这与此相反,它能够将事件限制在指定的日期范围内,但是它们不会在特定的日期,而是会延伸到所有日期
我在下面附上了这两个结果的图片
2018年第一个解决方案:
2019年第一个解决方案:
2018年第二个解决方案: 2019年第二个解决方案:
定期事件不会直接内置到fullCalendar中。您在第一个示例中使用的“范围”数据只需要一点额外的代码,如下所示:@ADyson you sir,谢谢您,这正是我问题的答案。
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'listYear',
views: {
listYear: { buttonText: 'Diary Dates' }
},
header: {
left: '',
center: '',
right: 'prev title next'
},
events: [{
title : "Shoalhaven Heads Seafood and Fresh Produce Fair",
url: 'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
backgroundColor: '#dd4242',
borderColor: '#dd4242',
start: '2018-04-21T08:00:00',
end: '2018-11-03T13:00:00',
dow: [6],
},
{
title : "BOWIE UNZIPPED at the BOWLO!",
url: 'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
backgroundColor: '',
borderColor: '',
start: '2018-04-27',
allDay: true,
}]
});
});
</script>