Fullcalendar是一个非常受欢迎的日历日程处理的js组件，它功能强大，文档齐全，可定制化高，可与你的项目无缝对接。本站之前有很多文章介绍了Fullcalendar（v5）的使用。今天我们来看看如何在Vue框架下使用Fullcalendar。
- 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,
})
},
复制代码© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
