Fullcalendar V5踩坑 (日视图篇)

Vue项目使用

<template><div class="M_container"><FullCalendarclass="fullcalendar"ref="myCalendar":options="calendarOptions"></FullCalendar></div>
</template><script>import { GetDayList } from "@/api/schedule/index";
import {formateDate} from "@/utils/schedule/formate";
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import {eventContetFun,changeStartEnd,slotLabelContent,eventMouseEnter} from "@/utils/schedule/fullcalendarHandler"
export default {name: "byDay",components: {FullCalendar},props:['filterDate'],data() {return {selectDate:'',calendarOptions: {plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],initialView: "timeGridDay",events: [],locale: "zh-cn", themeSystem: "bootstrap", // 主题色(本地测试未能生效)expandRows: true,expandRows: true,contentHeight: 870,timeGridEventMinHeight: "26", // 设置事件的最小高度// 设置日历单元格宽度与高度的比例。eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示headerToolbar: false,allDaySlot: true,allDayText: "全天",scrollTimeReset:true,scrollTime:"12:00:00",slotDuration:"01:00",slotMinTime: "07:00:00",slotMaxTime: "20:00:00",dayHeaders: false,slotEventOverlap: false,//是否重叠showNonCurrentDates: false,eventMouseEnter:eventMouseEnter,slotLabelContent:slotLabelContent,eventContent:eventContetFun, views: {timeGridDay: {eventLimit:5,dayMaxEventRows: 4, /*  eventMaxStack:30, */moreLinkContent: "更多",moreLinkClick: "popover",},},slotLabelFormat: {hour: "2-digit",minute: "2-digit",meridiem: false,hour12: false, // 设置时间为24小时},eventLimitNum: {// 事件显示数量限制(本地测试未能生效)dayGrid: {eventLimit: 3,},timeGrid: {eventLimit: 2, // adjust to 6 only for timeGridWeek/timeGridDay},},eventClick: this.handleEventClick,},};},watch: {filterDate: {handler(newValue,oldValue) {if(newValue&&newValue!=oldValue){ /*  this.$emit('changeDayDate',newValue); */this.selectDate=newValue;this.getDayData();}else{this.$alert("请选择日期", "提示");}},immediate: true},},mounted() {this.$nextTick(()=>{this.selectDate=this.filterDate;})},methods: {changeSelect(){this.$emit('changeDayDate',this.selectDate);},getDayData() {const _this = this;this.$nextTick(()=>{let calendarApi = this.$refs.myCalendar.getApi(); calendarApi.gotoDate( _this.filterDate );})GetDayList({startDate: _this.filterDate,}).then((res) => {let resData = res.data,result = resData.flat(Infinity);const handleData = result.map((item) => {let timeObj=changeStartEnd(_this.filterDate,item); return {start: timeObj.itemStart,end: timeObj.itemEnd,startTimes:new Date(item.startTime?item.startTime:item.allDayStartTime),endTimes:new Date(item.endTime?item.endTime:item.allDayEndTime),title: item.sysScheduleContent,classNames: item.actualCompleteTime ? "blue" : "orange",sysScheduleArrangeAllRecordId:item.sysScheduleArrangeAllRecordId,sysScheduleArrangeId:item.sysScheduleArrangeId,status:item.status,actualCompleteTime:item.actualCompleteTime,important:item.important,};});_this.calendarOptions.events =handleData;});},/*** 点击日历日程事件** info: 事件信息* event是日程（事件）对象* jsEvent是个javascript事件* view是当前视图对象。*/handleEventClick(info) {const data=info.event._def.extendedProps;const scheduleID={sysScheduleArrangeAllRecordId:data.sysScheduleArrangeAllRecordId,sysScheduleArrangeId:data.sysScheduleArrangeId,status:data.status};this.$emit('getScheduleID',scheduleID)},},
};
</script>

依赖包版本如下

页面效果：

纵坐标时间轴处理：

首先，设置

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()+" "+HouritemStart=time+":00";itemEnd=time+":30"}return {itemEnd,itemStart}}else{//全天日程return {itemStart:item.allDayStartTime,itemEnd: item.allDayEndTime}}}

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

fullcalendar插槽的使用

1.自定义dayHeaderContent

<FullCalendarref="fullCalendar"class="fullcalendar week":options="calendarOptions"><template v-slot:dayHeaderContent='arg'><div class="top"  @click="changeToDay(arg.date)">{{arg|formateHeaderContent}}<span v-if="weekEventNumObj[arg.dow]>1" class="moreTips">更多日程</span></div></template> </FullCalendar>

2.自定义eventContent

<template v-slot:eventContent='arg'><el-tooltipclass="box-item"effect="dark"placement="top-start"><template #content><span>{{ parseTime(arg.event.start,'{m}月{d}日 {h}:{i}') }}-{{ parseTime(arg.event.end,'{m}月{d}日 {h}:{i}') }} 预约时长：{{arg.event.extendedProps.num}}小时</span></template><div :class="[type !='check' ? 'text-box':'text-box check']"><span @click="changeInfo(arg.event)">{{ parseTime(arg.event.start,'{m}月{d}日') == parseTime(arg.event.end,'{m}月{d}日') ? parseTime(arg.event.start,'{h}:{i}') : parseTime(arg.event.start,'{m}月{d}日 {h}:{i}') }} -{{ parseTime(arg.event.end,'{m}月{d}日') == parseTime(arg.event.start,'{m}月{d}日') ? parseTime(arg.event.end,'{h}:{i}') : parseTime(arg.event.end,'{m}月{d}日 {h}:{i}')}}时长：{{arg.event.extendedProps.num}}h</span><el-button v-if="type !='check'" type="danger" circle @click="deleteItem(arg.event.id)"><el-icon size="10"><close-bold /></el-icon></el-button></div></el-tooltip>
</template>

<template v-slot:eventContent="arg"><el-popover:append-to-body="true"ref="popover1"placement="top-start"width="220":visible-arrow="true"trigger="hover":teleported="false"popper-class="popover":open-delay="100"@show="showPic(arg)"@hide="popoverPicReset(arg)"></el-popover>
</template>

3.自定义slotLabelContent

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

<FullCalendarref="fullCalendar"class="fullcalendar week":options="calendarOptions"><template v-slot:slotLabelContent='arg'><div class="top"  @click="changeToDay(arg.date)">{{arg|formateHeaderContent}}<span v-if="weekEventNumObj[arg.dow]>1" class="moreTips">更多日程</span></div></template> </FullCalendar>

Fullcalendar V5踩坑 (日视图篇)相关推荐

环信SDK 踩坑记webIM篇（三）
问题:接收消息时报错 TypeError: Cannot read property 'isemoji' of undefined at connection.handleMessage 自己打开了w ...
环信SDK 踩坑记webIM篇（二）
发送消息时报错Converting circular structure to JSON 这句话我也在网上查了一下,导致的原因可能是里面存在多级递归,导致JSON很大,不能使用.这是为什么呢,请看代码 ...
环信SDK 踩坑记webIM篇（一）
(一)处理添加好友问题:添加好友时,一直返回none,就是对方拒绝添加的意思,可是在代码里明明就是有同意添加的代码: onPresence: function (message) {switch ...
python3爬虫踩坑记纪录篇（二）
1首先这两天遇到线程锁的问题不涉及锁机制,只改代码线程锁的时候一定要锁上全局变量,局部变量或没锁的情况都会造成程序重复同时lock.acquire(),lock.release()可以使用with ...
踩坑日记第一篇：nacos作为配置中心加载带加密的数据库连接配置文件时出现报错claims to not accept jdbcUrl, mpw...
在项目中采用了AES加密和ENC加密方式的项目,在配置中心加载配置文件的时候使用AES加密是无法启动的,全部改用 ENC的加密方式
vantUI组件：van-card 自定义内容 - 踩坑篇
vantUI组件:van-card 自定义内容 - 踩坑篇特别说明: 自定义用法,格式必须: <van-card> <template #tags> ····自定义内容·· ...
vantUI组件：获取验证码 - 踩坑篇
vant 的button组件:(发送验证码)按钮点击没反应? 应用场景 · 前戏: 效果图解说: 代码公示: <van-fieldv-model="sms"centercle ...
vantUI 弹出层（轻提示）案例 - 踩坑篇
vantUI 弹出层(轻提示)- 踩坑篇可自定义项: 显示时长显示内容显示何时消失代码 · 实例: if(this.checkedAgreement == false){this.$toast
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...

Fullcalendar V5踩坑 (日视图篇)

Vue项目使用

纵坐标时间轴处理：

fullcalendar插槽的使用

Fullcalendar V5踩坑 (日视图篇)相关推荐

最新文章

热门文章