FullCalendar重复事件后不持续显示问题

long646824891

已于 2022-08-19 14:35:51 修改

阅读量513

点赞数

分类专栏：时间格式化文章标签：前端 javascript vue js

于 2022-07-19 23:20:36 首次发布

本文链接：https://blog.csdn.net/long646824891/article/details/125882844

版权

时间格式化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

FullCalendar rrule设置重复事件后连续日程只显示一天问题

遇见的深坑问题

在这里插入图片描述

用来展示的数据格式
以下是常规显示

     events: [{
                    id: 4,
                    title: '使用className:done',
                    start: '2018-12-10 09:00',
                    end: '2018-12-11 18:00',
                    color: 'blue',
                    className: 'done'

                }，
                {id: 1,
                    title: '这是一个all-day数据',
                    allDay: true,
                    start: '2018-12-11'
                    }
                ]

重复事件每周重复或者每年重复
用以下转换，会出现如果该事件连续两天的事件，只会显示到第一天 例如 20-23的事件，只会显示20

     events: [{
                    id: 4,
                    title: '使用className:done',
                    start: '2018-12-10 09:00',
                    end: '2018-12-11 18:00',
                    color: 'blue',
                    className: 'done'，
                    *** rrule ***：this.transRrule（data）

                }，
                {id: 1,
                    title: '这是一个all-day数据',
                    allDay: true,
                    start: '2018-12-11'}
                ]

    // 转换rrule规则
    transRrule(rule) {
      //转换事件重复规则
      let freqRules = undefined;
      // 是否为工作日重复
      let byweekday = undefined;
      switch (rule.repeatType) {
        case 0:
          freqRules = "DAILY";
          break;
        case 1:
          freqRules = "WEEKLY";
          break;
        case 2:
          freqRules = "MONTHLY";
          break;
        case 5:
          freqRules = "YEARLY";
          break;
        case 7:
          freqRules = undefined;
          byweekday = ["mo", "tu", "we", "th", "fr"];
          break;
        case -1:
          freqRules = undefined;
          break;
        default:
          break;
      }
      return {
         dtstart: rule.start,
        freq: freqRules,
        byweekday,
        until:
          rule.repeatUntil !== null && rule.repeatUntil!=0
            ? formatDate(rule.repeatUntil).split(" ")[0]
            : undefined,
      };
    },

用以下方法可以正常显示连续的天数
20-23 显示20-23 并且每周每天每年每月展示没问题

 events: [{
                    id: 4,
                    title: '使用className:done',
                    start: '2018-12-10 09:00',
                    end: '2018-12-11 18:00',
                    color: 'blue',
                    className: 'done'，
                    **rrule**：this.transRrule（data），
                    //求两个日期之间的天数
            let allTime = this.getAllTime(startTime.substring(0,10),endTime.substring(0,10));
                    ***duration***： {
                days:allTime.length
            }，

                }，
                {id: 1,
                    title: '这是一个all-day数据',
                    allDay: true,
                    start: '2018-12-11'}
                ]

//获取两个时间之间具体有哪天
getAllTime(begin, end) {
var ab = begin.split(“-”);
var ae = end.split(“-”);
var db = new Date();
db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
var de = new Date();
de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
var unixDb = db.getTime();
var unixDe = de.getTime();
let temp =[];
for (var k = unixDb; k <= unixDe;) {
temp.push(this.format((new Date(parseInt(k)))));
k = k + 24 * 60 * 60 * 1000;
}
return temp;
},