Vue3 FullCalendar使用并设置dayGrid视图的最大事件数过程
作者:zhoxier
FullCalendar dayGrid视图可通过dayMaxEvents配置限制每日事件数量,超出部分折叠显示为“+nmore”,设置为true时自动计算,数字则手动限制,点击展开查看全部事件,适用于月/周视图,支持CSS自定义折叠文本样式
FullCalendar 的 dayGrid 视图默认会显示所有事件,但可以通过配置限制每天显示的事件数量,超出部分以“+n more”的形式折叠。
安装 FullCalendar 及相关插件
确保已安装 FullCalendar 核心库和 dayGrid 插件:
npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/vue3
初始化显示事件数
在 Vue3 组件中,以下示例,通过配置dayMaxEvents的值,实现每天显示数量,超出部分“+n more”的形式折叠。
dayMaxEvents:true - 日历自动计算合适的数量,显示“+n more”。
<template> <div ref="fullcalendar" class="card"></div> </template> <script> import FullCalendar from '@fullcalendar/vue3' import dayGridPlugin from '@fullcalendar/daygrid' const initCalendar = () => { Tcalendar.value = null Tcalendar.value = new Calendar(fullcalendar.value, { plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin], initialView: type.value, aspectRatio: 2.2, // 宽度比 locale: "zh-cn", handleWindowResize: true, // loading: loading //控制表格加载 editable: false, // 允许编辑表格 droppable: false, //允许从外部拖拽进入日历 eventDurationEditable: false, //控制时间段是否可以拖动 eventResizableFromStart: false, //控制事件是否可以拖动 selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段 firstDay: 1, // 设置一周中显示的第一天是哪天,周日是0,周一是1,类推。 unselectAuto: true, // 当点击页面日历以外的位置时,是否自动取消当前的选中状态 //dayMaxEvents: true, //在dayGrid视图中,给定日期内的最大事件数 dayMaxEvents: 5, headerToolbar: false, // 关闭默认日历头部,采取自定义的方式切换日历视图 // allDaySlot: false, // 关闭全天选项 allDayText: "全天", nowIndicator: true, eventMaxStack: 2, events: state.infoList, //主要数据 eventClassNames: function (arg) { // 添加自定义class return [arg.event.extendedProps.class]; }, eventContent: function (arg) { // 日历上event显示的样式 const italicEl = document.createElement("div"); // 列表才显示 if (type.value === "listWeek") { // 标题 const nameEl = document.createElement("h4"); nameEl.setAttribute("class", `h4`); nameEl.innerHTML = arg.event.extendedProps.name; italicEl.append(nameEl); // 岗位 const text1El = document.createElement("p"); text1El.innerHTML = arg.event.extendedProps.job; italicEl.append(text1El); // 面试官 const text2El = document.createElement("p"); text2El.innerHTML = "描述:" + arg.event.extendedProps.job; italicEl.append(text2El); } else { // 标题 const titleEl = document.createElement("div"); titleEl.setAttribute("class", `calendar-title`); const nameEl = document.createElement("span"); nameEl.setAttribute("style","overflow:hidden;text-overflow: ellipsis;"); nameEl.innerHTML = arg.event.extendedProps.name; titleEl.append(nameEl); titleEl.setAttribute("id",arg.event.id); // 时间 const timeEl = document.createElement("span"); if (arg.event.start && arg.event.end) { timeEl.innerHTML = dayjs(arg.event.start).format("HH:mm") + "-" + dayjs(arg.event.end).format("HH:mm"); if (timeEl.innerHTML !== "00:00-00:00") { titleEl.append(timeEl); } } titleEl.addEventListener('click',function(){ showEditDialog(this.id); //handleClick(this.id); }) italicEl.append(titleEl); // 企业名称 const enterpriseEl = document.createElement("div"); enterpriseEl.setAttribute("class", `calendar-enterprise`); enterpriseEl.innerText = arg.event.extendedProps.enterpriseName; italicEl.append(enterpriseEl); } italicEl.setAttribute("class", `calendar-card`); return { domNodes: [italicEl] }; }, noEventsContent: function () { const noEl = document.createElement("div"); noEl.innerHTML = "暂无日程安排,请安排相关日程"; return { domNodes: [noEl] }; }, // 点击查看时触发 eventClick: function (info) { //handleClick(info); }, // 视图选择日期触发 select: function (info) { //handleSelectDate(info); }, // 拖拽event大小时触发 eventResize: function (info) { debugger handleEventResize(info); }, // 拖拽停止时触发 eventDrop: function (info) { debugger handleDrap(info); }, }); Tcalendar.value.render(); }; const getList=async()=>{ const res = await listWorkPlan(); // 这里加载数据 state.infoList = [] res.tableData.rows.forEach(item=>{ let tag = "" if(item.workStatus==='1') { tag = "tag_leave" } else{ tag = "tag_" + item.workType.replace(/^0+/, '') } let enterpriseName = ''; if(item.enterpriceId){ item.enterpriceId.forEach(itm => { enterpriseName = enterpriseName?enterpriseName+","+itm.enterpriseName:itm.enterpriseName }) } let d ={ "id":item.id, title: item.planTitle, name: item.planTitle, start: item.startTime, end: item.endTime, class: tag, job: "", description: item.planContent, enterpriseName: enterpriseName, } state.infoList.push(d); }) initCalendar(); } onMounted(() => { nextTick(() => { getList(); }); }); </script>
自定义文本样式
可以通过 CSS 自定义折叠文本的样式:
.tag_1, .tag_2, .tag_3, .tag_4, .tag_leave, .tag_work_overtime, .tag_99{ border-radius: 20px; } .tag_1 { background-color: #d9ecff; } .tag_2 { background-color: #a0cfff; } .tag_3 { background-color: #79bbff; } .tag_4{ background-color: #409eff; } .tag_99{ background-color: #337ecc; } .tag_leave{ background-color: #f56c6c; } .tag_work_overtime{ background-color: #1ab394; }
注意事项
dayMaxEvents
属性对dayGridMonth
和dayGridWeek
视图均有效。- 设置为
true
时,FullCalendar 会自动计算适合的数量。 - 设置为数字时,明确限制显示的事件数量。
- 事件超出限制时,点击“+n more”会展开 popover 显示全部事件。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。