- FullCalendar官网：fullcalendar.io/
- FullCalendar官方文档：fullcalendar.io/docs
最新FullCalendar中文文档合集 大家可以参考这个网站的总结，挺到位 最新FullCalendar中文文档
安装Fullcalendar
// 安装版本为v5.6 npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid 复制代码
FullCalendar 以核心代码和插件形式提供给用户安装，因此我们需要哪些功能，就直接安装对应的插件即可。使用时可以参照：功能插件列表。
使用
1. 建立一个Fullcalendar.vue
<template> <!-- 代办任务 日程表 --> <div class="top" style="background: #fff; padding: 8px 6px"> <div class="modelBox"> <span class="radis"></span> <span style="color: black; font-size: 16px; font-weight: bold">待办任务</span> </div> <div class="tabs" style="width: 100%"> <FullCalendar ref="fullCalendar" :options="calendarOptions" class="demo-app-calendar" /> </div> </div> </template> 复制代码
2. 引入所要用的插件
import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import timeGridPlugin from '@fullcalendar/timegrid' import interactionPlugin from '@fullcalendar/interaction' import zhCnLocale from '@fullcalendar/core/locales/zh-cn' 复制代码
3. 所有的配置项在calendarOptions完成
calendarOptions: { plugins: [ // 加载插件，V5采用插件模块方式加入 dayGridPlugin, timeGridPlugin, interactionPlugin, // needed for dateClick ], height: 800, //日历高度 width: 600, headerToolbar: { // 头部toolba left: 'prev,next today', center: 'title', right: 'timeGridDay,timeGridWeek,dayGridMonth', // right: 'dayGridMonth' }, handleWindowResize: true, //随浏览器窗口变化 initialView: 'dayGridMonth', // 初始化插件显示 // initialDate:""//初始化日期 // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed // editable: true, //是否可编辑 // droppable: true,//可拖拽的 // timeZone: 'local',//采用时区 selectable: true, // selectMirror: true, dayMaxEvents: true, // weekends: true, // 是否显示一周七天 // select: this.handleDateSelect, // eventClick: this.handleEventClick, // 日程点击事件 eventMouseEnter: this.handleEventMouseEnter, // 用户将鼠标悬停在事件上时触发 // eventsSet: this.handleEvents, // dateClick: this.handleDateClick,//日期方格点击事件 eventClick: this.handleEventClick, //日程点击事件 locale: zhCnLocale, nextDayThreshold: '01:00:00', events: [ //日程事件的json // { title: 'event 1', date: '2021-04-23 12:00:00' }, // { title: 'event 2', date: '2021-04-24 05:59:23' }, // { title: 'event 3', date: '2021-04-25 08:23:00' }, // { title: 'event 4', date: '2021-04-25 09:30:00' }, // { title: 'event 5', date: '2021-04-26 12:00:00' }, // { title: 'event 2', date: '2021-04-26 15:00:00' } ], // datesSet: this.handleDateSet, /* you can update a remote database when these fire: eventAdd: eventChange: eventRemove: */ }, 复制代码
4. 日程表赋值
// 年度总结报告 that.calendarOptions.events.push({ color: '#ff9900', title: element.name, date: element.time, status: this.statusName, type: element.type, times: element.time, category: element.category }) 复制代码
5. 本案例用到在日程上鼠标移入悬浮框显示详情，利用eventMouseEnter鼠标悬停事件,这里用到tippy.js插件，tippy.js文档。
// 用户将鼠标悬停在事件上时触发,这里数据做了类型判断，不同的类型数据页面悬浮框显示不用的内容 handleEventMouseEnter(info) { console.log(info, 'yyyy') let col = info.event.borderColor let eve = info.event._def.extendedProps let category = info.event._def.extendedProps.category tippy(info.el, { // content:"<div style='width: 280px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999'>" + // "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称：" + info.event.title+"</div>" + // "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型："+eve.type+"</div>" + // "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间："+eve.times+"</div>" + // "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态："+eve.status+"</div>" + // "</div>", content: `<div style='width: 260px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999;'> <div style='display:flex;color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"> <div><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称： </div> <div style="width:161px;white-space:normal;overflow: auto;table-layout:fixed; word-break: break-all; height:auto;display:inner-block">${info.event.title}</div> </div> <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型：${eve.type}</div> <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间：${eve.times}</div> <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态：${eve.status}</div> <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>年份：${eve.year}</div> <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>领域角色：${eve.depRoleName}</div> <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>姓名：${eve.name}</div> </div>`, theme: 'light', //主题选取 // trigger: 'click', //触发类型 interactive: true, //可交互的 placement: 'top-start', //悬浮框位置 allowHTML: true, //是否允许html文本 zIndex: 99999, }) },