fullcalendar官网
应用版本：@fullcalendar/vue": "^5.3.1"
<template> <div class="calendar"> <div class="top-content"> <!-- <div id="tooltip" title="">I'm a tooltip</div> --> <!-- <div id="tooltip1">I'm a tip of tooltip</div> --> <div class="left"> <span @click="prevFn" class="op el-icon-arrow-left"></span> <span>2020年xx月 第x周</span> <span @click="nextFn" class="op el-icon-arrow-right"></span> </div> <div class="center"> <el-input v-model="filterKey" placeholder="搜寻" suffix-icon="el-icon-search" @keyup.enter.native="searchFn" size="small" /> </div> <div class="right"> <el-button @click="todayFn" type="primary" class="today-btn">今日</el-button> <el-radio-group v-model="viewType" @change="changeViewTypeFn"> <el-radio-button label="dayGridMonth">月</el-radio-button> <el-radio-button label="timeGridWeek">周</el-radio-button> <el-radio-button label="listWeek">日程</el-radio-button> </el-radio-group> </div> </div> <div class="calendar-content"> <div class="event-info"> <div class="tags"> <span class="level level-1"></span> <span class="label">紧急变更</span> </div> <div class="tags"> <span class="level level-2"></span> <span class="label">惯例变更（重大、较大）</span> </div> <div class="tags"> <span class="level level-3"></span> <span class="label">惯例变更（个别、中等）</span> </div> <div class="tags"> <span class="level level-4"></span> <span class="label">规范变更</span> </div> <div class="event-size"> 本月变更共计： <span class="num">18</span> 条 </div> </div> <FullCalendar ref="calendarRef" :options="calendarOptions"> <!-- <template #eventContent="{ timeText, event }"> <b>{{ timeText }}</b> <i>{{ event.title }}</i> </template> --> </FullCalendar> </div> </div></template><script>import module from './calendar.js'export default { ...module}</script><style lang="scss" scoped>@import './calendar.scss';</style>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 $ from 'jquery'import 'jquery-ui-dist/jquery-ui'import 'jquery-ui-dist/jquery-ui.css'window.$ = $// fc-day-sat 周六加款式的形式export default { components: { FullCalendar // make the <FullCalendar> tag available }, data() { return { filterKey: '', // 搜寻条件 viewType: 'dayGridMonth', // 显示方式 // 日历配置项 calendarOptions: { locale: "zh-cn", // 中文 height: '100%', plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ], initialView: 'dayGridMonth', dateClick: this.handleDateClick, // 点击某一天 // 想要触发dateClick事件必须先装置援用interaction插件 eventClick: (event, el, jsEvent, view) => { // 点击某个事件 console.log('eventClick') console.log(event, el, jsEvent, view) }, eventDidMount: this.eventDidMount, eventWillUnmount: this.eventWillUnmount, viewDidMount: (info) => { console.log('viewDidMount') }, // eventAdd: this.afterEventAdd, headerToolbar: false, // headerToolbar: { // left: 'title', // center: '', // right: '' // }, // buttonText: { // today: 'today', // month: 'month', // list: 'list' // }, // timeGridEventMinHeight: '20', // 设置事件的最小高度 aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例 // dayMaxEventRows: 2, // ??? dayMaxEvents: 3, events: [{ id: 1, title: 'BCH237', start: '2020-11-12T10:30:00', end: '2020-11-12T11:30:00', extendedProps: { department: 'BioChemistry' }, description: 'Lecture' }], slotEventOverlap: false, // 雷同时间段的多个日程视觉上是否容许重叠，默认true容许 noEventsContent: '暂无变更', } } }, computed: { }, mounted () { this.addDayEvent() // this.$nextTick(() => { // $("#tooltip").tooltip({ // content: $('#tooltip1') // }); // }) }, methods: { // 切换到上一页 prevFn () { const calendarApi = this.$refs.calendarRef.getApi() calendarApi.prev() }, // 切换到下一页 nextFn () { const calendarApi = this.$refs.calendarRef.getApi() calendarApi.next() }, // 切换到明天 todayFn () { const calendarApi = this.$refs.calendarRef.getApi() calendarApi.today() }, // 获取以后形容 getCurrentTitle () { }, // 切换显示类型 changeViewTypeFn (type) { const calendarApi = this.$refs.calendarRef.getApi() calendarApi.changeView(type) // , '2020-11-05' }, // 按日增加事件 addDayEvent () { const calendarApi = this.$refs.calendarRef.getApi() // 增加当月事件 calendarApi.addEvent(this.genEvent('level-1')) calendarApi.addEvent(this.genEvent('level-2')) calendarApi.addEvent(this.genEvent('level-3')) calendarApi.addEvent(this.genEvent('level-4')) calendarApi.addEvent(this.genEvent('level-2')) calendarApi.addEvent(this.getVacation()) }, // 获取假期 getVacation () { const id = new Date().getSeconds() + Math.floor(Math.random() * 10000) return { id: id, date: '2020-11-05', classNames: 'event-cls-vacation', display: 'background', color: '#eee', // daysOfWeek: [0, 6] } }, // 依据类型获取事件 genEvent (type) { const id = new Date().getSeconds() + Math.floor(Math.random() * 10000) const tempObj = { id: id, title: type, date: '2020-11-05', // startTime: '09:10:00', // endTime: '10:10:00', start: "2020-11-05T09:10:00+00:00", end: '2020-11-05T09:00:05+00:00', } tempObj.classNames = ['event-cls', 'event-cls-' + type] tempObj.display = 'list-item' if (type === 'level-1') { tempObj.textColor = 'white' tempObj.backgroundColor = 'red' } else if (type === 'level-2') { tempObj.textColor = 'white' tempObj.backgroundColor = 'orange' } else if (type === 'level-3') { tempObj.textColor = 'white' tempObj.backgroundColor = 'yellow' } else if (type === 'level-4') { tempObj.textColor = 'white' tempObj.backgroundColor = 'blue' } return tempObj }, // 搜寻 searchFn () { }, // 事件被渲染 eventDidMount (info) { console.log('eventDidMount') console.log(info) if (!$(info.el).tooltip( "instance" )) { $(info.el).attr('title', '') $(info.el).tooltip({ content: '<a style="color: red">aaaaaaa</a>',// $('#tooltip1'), position: { my: "left+0 center", at: "left center" } }); } else { $(info.el).tooltip('disable') $(info.el).tooltip('destroy') } }, eventWillUnmount (info) { if ($(info.el).tooltip( "instance" )) { $(info.el).tooltip('disable') $(info.el).tooltip('destroy') } }, // 新增事件后回调 afterEventAdd () { console.log('afterEventAdd') }, // 点击某一天 handleDateClick: function(arg) { console.log('date click! ' + arg.dateStr) } }}.calendar { width: 100vw; height: 100vh; .top-content { display: flex; align-items: center; padding: 20px; box-shadow: 0px 0px 10px #eee; .left { display: flex; align-items: center; margin-right: 30px; line-height: 24px; font-weight: bold; .op { cursor: pointer; font-size: 18px; padding: 0 10px; line-height: 24px; &:hover { color: #3e3bee; } } } .center { flex: 1; .el-input { width: 300px; } } .today-btn { margin-right: 20px; } } .calendar-content { height: calc(100% - 73px); padding: 20px; overflow-y: auto; .event-info { display: flex; align-items: center; margin-bottom: 15px; .tags { display: flex; align-items: center; margin-right: 20px; .level { display: inline-block; width: 16px; height: 16px; &.level-1{ background-color: red; } &.level-2{ background-color: orange; } &.level-3{ background-color: yellow; } &.level-4{ background-color: blue; } } .label { margin-left: 10px; font-size: 12px; height: 16px; line-height: 16px; } } .event-size { flex: 1; text-align: right; font-size: 12px; .num { color: orange; } } } } >>> .fc { // 展现某月 .fc-dayGridMonth-view { // 头部款式 .fc-col-header-cell { background-color: #e7ebfd; } // 日 .fc-daygrid-day { // 事件款式 .event-cls { .fc-daygrid-event-dot { border-radius: 0; border-left-width: 3px; border-right-width: 3px; border-top-width: 6px; border-bottom-width: 6px; margin-right: 8px; } .fc-event-title { color: blue; } } // 日期文本靠左 .fc-daygrid-day-top { direction: rtl; } // 休息日 .event-cls-vacation { opacity: 0.8; &::after { content: '休'; position: absolute; top: 0; right: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: orange; border-bottom-left-radius: 10px; } } } } }}