Fullcalendar 日程实现重复日期功能

最新推荐文章于 2025-03-13 13:27:38 发布

于梧

最新推荐文章于 2025-03-13 13:27:38 发布

阅读量2.3k

点赞数

文章标签： java vue javascript

本文链接：https://blog.csdn.net/weixin_49893507/article/details/116456381

版权

本文介绍了如何在Fullcalendar中实现日程的重复显示功能。通过使用`groupId`属性和`daysOfWeek`参数，实现了简单的重复周设置。对于更复杂的重复规则，作者在后端处理数据并在前端进行渲染。文章提供了部分关键代码片段，包括日程数据的构建和自定义方法，同时也提到了使用rrule插件来处理复杂重复规则的参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Fullcalendar 日程实现重复日期功能

在工作的时候需要实现Fullcalendar日程重复显示的问题，百度查了很久在even加了dow属性不生效，跑到官网里也没有查找到相关的资料，后来自己通过查看了官网文档得到了解决问题的思路。如图所示是需求：
在这里插入图片描述
最终实现效果：

解决问题思路来源是发现了even里的groupId属性，很多案列里都没有提到这个属性，接下来说说fullcalendar自带的简单重复周属性，fullcalendar自带简单的重复功能，但是只适用于周的情况，也就是daysOfWeek属性，接受的参数也和普通的even有所不同。（id是唯一标识符，但是groupId属性却起到了同一组数据的作用）可以复制下面的数据自行体会一下。

{
   
              daysOfWeek: ["1"],
              startTime: "11:00:00",
              endTime: "11:30:00",
              color: "red",
              title: "每周一重复(拖动试试)",
            },
            {
   
              groupId: "20211112008",
              daysOfWeek: ["1"],
              startTime: "11:00:00",
              endTime: "11:30:00",
              color: "yellow",
              title: "每周一重复(拖动试试)",
            },
            {
   
              groupId: "20211112009",
              daysOfWeek: ["2"],
              startTime: "11:00:00",
              endTime: "11:30:00",
              color: "red",
              title: "每周二重复(在限定时间里))",
              startRecur: "2021-11-08",
              endRecur: "2021-11-17",
            },
            {
   
              groupId: "20211112010",
              daysOfWeek: ["2"],
              startTime: "11:00:00",
              endTime: "11:30:00",
              color: "red",
              allDay: true,
              title: "每周二重复(在限定时间里))",
              startRecur: "2021-11-08",
              endRecur: "2021-11