Fullcalendar V5踩坑 (日视图篇)

Vue项目使用

依赖包版本如下

 页面效果：

 纵坐标时间轴处理：

首先，设置

        slotMinTime: "07:00:00",

        slotMaxTime: "20:00:00",

设置后08：00-18：00前后只剩下一格位置，再结合slotLabelContent：function(arg){}对时间轴文字处理

function slotLabelContent(arg){
  if (Number(arg.time.milliseconds) < 28800000) {
    return "08:00前";
  }
  if (
    Number(arg.time.milliseconds) >= 28800000 &&
    Number(arg.time.milliseconds) <= 64800000
  ) {
    return arg.text;
  }
  if (Number(arg.time.milliseconds) > 64800000) {
    return "19:00后";
  }
}

这下出现了20：00后或者07：00前的数据无法呈现，因为该部分时间并没有对应的时间轴

这时候就要对Events:[]的数据进行处理，同时结合eventContent：function(arg){}

以下代码是对start和end进行处理

function changeStartEnd(day, item) {
  if(item.startTime&&item.endTime){//非全天
    let startTime = new Date(day + " " + '08:00');
    let endTime = new Date(day + " " + '20:00');
    let endTime1 = new Date(day + " " + '19:00');
    let itemStart = new Date(item.startTime);
    let itemEnd = new Date(item.endTime);
    if (itemStart < startTime) {
      itemStart = new Date(day + " " + '07:00');
    }
    if (itemStart > endTime1) {
      itemStart = new Date(day + " " + '19:00')
    }
    if (itemEnd < startTime) {
      itemEnd = startTime;
    }
    if (itemEnd > endTime1) {
      itemEnd = endTime;
    }
    if(new Date(itemEnd)-new Date(itemStart)==0){//开始时间和结束时间一样 只占用半格
      let Hour=itemStart.getHours()<10?'0'+itemStart.getHours():itemStart.getHours()
      let time=itemStart.getFullYear()+"-"+(itemStart.getMonth()+1)+"-"+itemStart.getDate()+" "+Hour
      itemStart=time+":00";
      itemEnd=time+":30"
    }
    return {itemEnd,itemStart}
  }else{//全天日程
    return {
      itemStart:item.allDayStartTime,
      itemEnd: item.allDayEndTime
    }
  }
  
}

startTimes和endTimes用于页面文字展示时间段

fullcalendar插槽的使用

 1.自定义dayHeaderContent

2.自定义eventContent

3.自定义slotLabelContent

tips:  slotDuration:"01:00",设置为一个小时，时间垂直居中显示，不然偏上