Fullcalendar 日程实现重复日期功能

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: 
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
fullCalendar是一个基于jQuery的日历插件,可以用来显示和管理日程安排。它支持多种日历视图,包括月视图、周视图、日视图和议程视图等,还可以添加事件、拖动和缩放事件等功能。 使用fullCalendar,你可以轻松地创建一个交互式的日历,方便用户查看和管理日程。以下是使用fullCalendar创建日程管理的基本步骤: 1. 引入fullCalendar插件及其依赖库(如jQuery)。 2. 创建一个空的div元素,用于容纳日历。 3. 初始化fullCalendar插件,并设置日历的基本属性(如日期范围、视图类型等)。 4. 添加事件数据日历中。 5. 监听日历的事件(如事件点击、拖动、缩放等),并根据需要更新事件数据。 下面是使用fullCalendar创建日程管理的示例代码: HTML代码: ``` <div id="calendar"></div> ``` JavaScript代码: ``` $(document).ready(function() { // 初始化fullCalendar插件 $('#calendar').fullCalendar({ // 设置日历属性 header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultView: 'month', selectable: true, selectHelper: true, editable: true, eventLimit: true, events: [ // 添加事件数据 { title: 'Event 1', start: '2021-09-01' }, { title: 'Event 2', start: '2021-09-05', end: '2021-09-07' }, // more events... ], // 监听日历事件 eventClick: function(calEvent, jsEvent, view) { // 处理事件点击事件 }, eventDrop: function(event, delta, revertFunc) { // 处理事件拖动事件 }, eventResize: function(event, delta, revertFunc) { // 处理事件缩放事件 } }); }); ``` 在上面的示例中,我们使用了fullCalendar的基本属性,如header、defaultView、selectable、editable等,并添加了一些事件数据日历中。我们还监听了一些日历事件,如eventClick、eventDrop、eventResize等,以便根据用户的操作来更新事件数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值