当前位置：首页 > news >正文

了解Vue中日历插件Fullcalendar

news 来源：原创 2024/5/16 20:01:24

实现效果如下图：

月视图
在这里插入图片描述

在这里插入图片描述
周视图

日视图

官方文档地址：Vue Component - Docs | FullCalendar

1、安装与FullCalendar相关的依赖项

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list
npm install --save @fullcalendar/interaction
npm install --save @fullcalendar/core @fullcalendar/resource-timeline

2.使用日历的页面需要导入

import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
// import resourceTimelinePlugin from "@fullcalendar/resource-timeline";

完整代码

<template><div><div class="fc-toolbar"><div class="fc-left"><el-button-group><el-button @click="month"> 月 </el-button><el-button @click="week"> 周 </el-button><el-button @click="today"> 今天 </el-button></el-button-group></div><div class="fc-center"><el-button icon="el-icon-arrow-left" @click="prev"/><p class="title">{{ title }}</p><el-button icon="el-icon-arrow-right" @click="next" /></div><div><el-select v-model="type" style="margin-right: 20px" @change="handleType"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /></el-select><el-button class="search" style="margin-right: 20px" type="button" @click="addEvent">新增</el-button><el-button class="search" type="button" @click="search">查询</el-button></div></div><el-dialog title="添加日程" :visible.sync="dialogFormVisible" width="600px"><el-form :model="form"><el-form-item label="事件"><el-input v-model="form.content" autocomplete="off" placeholder="请输入事件"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="navConfirm">确 定</el-button></div></el-dialog><div v-if="showFullcalendar">加载数据中......</div><FullCalendar v-else id="calendar" ref="fullCalendar" class="demo-app-calendar" :options="calendarOptions"><template v-slot:eventContent="arg"><el-popover placement="top-start" title="标题" width="200" :visible-arrow="false" trigger="click"><i class="title">{{ arg.event.title }}</i><el-button @click="more(arg.event)"> 更多 </el-button><div slot="reference" class="popper-content"><span>{{ arg.timeText }}</span><i>{{ arg.event.title }}</i></div></el-popover></template><template v-slot:dayCellContent="arg">{{ arg.dayNumberText }}</template><template v-slot:resourceLabelContent="arg">{{ arg.resource.id }}</template></FullCalendar></div>
</template>
<script>import FullCalendar from "@fullcalendar/vue";import dayGridPlugin from "@fullcalendar/daygrid";import timeGridPlugin from "@fullcalendar/timegrid";import listPlugin from "@fullcalendar/list";import interactionPlugin from "@fullcalendar/interaction";// import resourceTimelinePlugin from "@fullcalendar/resource-timeline";let clickCount = 0;let prev = ""; // 上一次点击的dom节点export default {components: {FullCalendar, // make the <FullCalendar> tag available},data() {return {showFullcalendar: true,title: "",currentView: {},options: [{ value: "timeline", label: "resource-timeline" },{ value: "dategrid", label: "agenda" },],type: "dategrid",calendarOptions: {locale: "zh",timeZone: "UTC",plugins: [dayGridPlugin,timeGridPlugin,listPlugin,// resourceTimelinePlugin,interactionPlugin,],buttonText: {// 设置按钮today: "今天",month: "月",week: "周",dayGrid: "天",},initialView: "dayGridMonth", // 设置默认显示月，可选周、日resourceAreaWidth: 200,contentHeight: 600,slotMinWidth: 70,resourceOrder: "number",editable: true,dayMaxEvents: true, // allow "more" link when too many eventseventDurationEditable: true, // 可以调整事件的时间selectable: true, // 日历格子可选择nowIndicator: true, // 现在的时间线显示eventDisplay: "block", // 争对全天的情况下，以块状显示headerToolbar: false, // 隐藏头部的导航栏selectMirror: false,displayEventEnd: true, // like 08:00 - 13:00eventTimeFormat: {// like '14:30:00'hour: "2-digit",minute: "2-digit",meridiem: false,hour12: false, // 设置时间为24小时},events: [],eventColor: "#378006",allDayText: "全天",dateClick: this.handleDateClick, //点击日程事件eventClick: this.handleEventClick,  //点击日历中的某一日程select:this.handleDateSelect, // 监听用户选择的时间段，eventDrop:this.handleEventDrop,  //监听事件被拖动的操作eventResize:this.handleEventResize, //监听事件调整大小的操作resourceAreaHeaderContent: "Rooms",resources: [{id: "111",title: "asas",number: 1,},],schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",resourceLabelContent(arg) {return {html: `<div>id: ${arg.resource.id}</div><div>title: ${arg.resource.title}</div>`,};},views: {customTimeLineWeek: {type: "resourceTimeline",duration: { weeks: 1 },slotDuration: { days: 1 },buttonText: "Custom Week",slotLabelFormat: {weekday: "long",// month: 'numeric',// day: 'numeric',omitCommas: true,},},customTimeLineMonth: {type: "resourceTimeline",duration: { month: 1 },slotLabelFormat: {// month: 'numeric',day: "numeric",// omitCommas: true,},},customGridWeek: {type: "timeGridWeek",dayHeaderFormat: {weekday: "long",},slotLabelFormat: {// 左侧时间格式hour: "2-digit",minute: "2-digit",meridiem: "lowercase",hour12: false, // false设置时间为24小时},},},// 切换视图调用的方法datesSet() { },},calendarApi: null,monthEvent: [{id: "1",resourceId: "1",title: "待办",start: "2024-01-04 09:00",end: "2024-01-04 18:00",color: "red",},{resourceId: "2",id: "2",title: "待办",start: "2024-01-15",color: "purple",},{ title: "待办", start: "2024-01-09" },{ title: "待办", start: "2024-01-17" },{ title: "待办", start: "2024-01-07" },{ title: "待办", start: "2024-01-07", color: "pink" },{ title: "待办", start: "2024-01-07" },{ title: "待办", start: "2024-01-07" },{id: "3",resourceId: "number_3",title: "待办",start: "20240111",end: "20240113",color: "blue",extendedProps: {description: "测试测试测试测试",},},{id: 4,title: "待办",start: "2024-01-15",extendedProps: {description: "test test test test test",},},],weekEvent: [{id: "4",resourceId: "4",title: "周待办",start: "2024-01-11",color: "red",},{id: "5",resourceId: "5",title: "待办1",start: "2024-01-04 10:00",end: "2024-01-04 18:00",color: "orange",},],dayDate:'',dialogFormVisible:false,form:{content:'',},selectInfo:{},};},mounted() {setTimeout(() => {this.showFullcalendar = false;this.$nextTick(() => {this.calendarApi = this.$refs.fullCalendar.getApi();this.title = this.calendarApi.view.title;this.getDtata();});}, 1000);},watch: {// 切换视图显示不同的事件"calendarApi.view.type"(newVal) {this.getDtata();},},methods: {// 监听用户选择的时间段，当用户选择了一段时间后会触发该回调，可以在这里处理创建新的日程。handleDateSelect(selectInfo) {console.log('selectInfo: ', selectInfo);this.selectInfo = selectInfo;this.form.content = '';// 用户选择了一个日期范围时触发this.dialogFormVisible = true;},// 用户拖动移动事件时触发handleEventDrop(dropInfo) {console.log('dropInfo: ', dropInfo);const updatedEvent = { ...dropInfo.event };updatedEvent.start = dropInfo.revertDuration ? dropInfo.oldEvent.start : dropInfo.event.start;updatedEvent.end = dropInfo.event.end;// 更新服务器上的事件或者重新排序你的事件数组// 示例：this.updateEventOnServer(updatedEvent);// 如果是在内存中维护事件，则更新本地数据const index = this.events.findIndex(e => e.id === updatedEvent.id);if (index !== -1) {this.events.splice(index, 1, updatedEvent);}},// 用户调整事件长度时触发handleEventResize(resizeInfo) {console.log('resizeInfo: ', resizeInfo);const updatedEvent = { ...resizeInfo.event };updatedEvent.end = resizeInfo.event.end;// 同样更新服务器或本地数据// 示例：this.updateEventOnServer(updatedEvent);const index = this.events.findIndex(e => e.id === updatedEvent.id);if (index !== -1) {this.events.splice(index, 1, updatedEvent);}},getDtata() {setTimeout(() => {this.calendarOptions.events =this.calendarApi.view.type === "dayGridMonth"? this.monthEvent: this.weekEvent;}, 200);},// 点击更多more(e) { console.log('more ', e)},//确认弹框按钮navConfirm(){this.dialogFormVisible = false;if (this.form.content) {this.calendarOptions.events.push({title: this.form.content,start: this.selectInfo.startStr,end: this.selectInfo.endStr,});// 更新日历视图以显示新添加的事件this.$refs.fullCalendar.getApi().addEvent({  //等同于 this.calendarApi.addEventtitle: this.form.content,start: this.selectInfo.startStr,end: this.selectInfo.endStr,});}},// 增加事件addEvent() {this.form.content = '';this.dialogFormVisible = true;// this.monthEvent},//点击日历中的某一日程handleEventClick(clickInfo) {console.log('clickInfo:', clickInfo);// 用户点击事件时触发，用于编辑或删除事件const event = clickInfo.event;console.log('Clicked on:', event.title);// 这里可以弹出模态框进行编辑或调用删除函数等操作},// 单击事件(日历中的某一天)handleDateClick(e) {this.dayDate = e.dateStr;if (e.dateStr !== prev) {clickCount = 0;}clickCount += 1;prev = e.dateStr;setTimeout(() => {if (clickCount === 2) {console.log("db click");} else if (clickCount === 1) {console.log("one click");}clickCount = 0;}, 300);},// 切换prev() {this.calendarApi.prev();this.title = this.calendarApi.view.title;},next() {this.calendarApi.next();this.title = this.calendarApi.view.title;},// 今天today(date, jsEvent, view) {// if (this.type === "timeline") {//   this.calendarApi.changeView("customTimeLineWeek");// } else {//   this.calendarApi.changeView("customGridWeek");// }this.calendarApi.today();this.title = this.calendarApi.view.title;this.calendarApi.changeView("timeGridDay");// this.calendarApi.today();// this.title = this.calendarApi.view.title;},// 月month() {if (this.type === "timeline") {this.calendarApi.changeView("customTimeLineMonth");} else {this.calendarApi.changeView("dayGridMonth");}this.calendarApi.today();this.title = this.calendarApi.view.title;},// 周week() {if (this.type === "timeline") {this.calendarApi.changeView("customTimeLineWeek");} else {this.calendarApi.changeView("customGridWeek");}this.calendarApi.today();this.title = this.calendarApi.view.title;},// 天day() {this.calendarApi.today();this.title = this.calendarApi.view.title;},// 查询search() {this.calendarApi.changeView("dayGrid", {start: "2022-07-07",end: "2022-07-09",});},// 选择时间线、日程handleType() {if (this.type === "timeline") {this.calendarApi.changeView("customTimeLineMonth");this.calendarOptions.slotLabelFormat = null;} else {this.calendarApi.changeView("dayGridMonth");}},},};
</script>
<style scoped>.demo-app {display: flex;min-height: 100%;font-family: Arial, Helvetica Neue, Helvetica, sans-serif;font-size: 14px;}.demo-app-sidebar {width: 300px;line-height: 1.5;background: #eaf9ff;border-right: 1px solid #d3e2e8;}.demo-app-sidebar-section {padding: 2em;}.demo-app-main {flex-grow: 1;padding: 3em;}.fc {/* the calendar root */max-width: 1100px;margin: 0 auto;}.fc-toolbar {width: 100%;margin: 30px auto;display: flex;flex: 1;justify-content: space-around;align-content: center;}.fc-center {/* height: 40px; */display: flex;align-content: center;}.fc-center .title {font-size: 16px;padding: 0 15px;font-weight: 700;/* height: 40px; *//* line-height: 40px; */}
</style>