共计 6891 个字符，预计需要花费 18 分钟才能阅读完成。
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;
}
}
}
}
}
}
正文完
