fullCalendar日历插件玩法解析
Fullcalendar安装
npm install --save @fullcalendar/vue
npm install --save @fullcalendar/core
@fullcalendar/daygrid
@fullcalendar/interaction
@fullcalendar/list
@fullcalendar/timegrid
导入
<template>
<div class="boxWidth">
<FullCalendar ref="myCalendar" :options="calendarOptions" />
</div>
</template>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
components: {
FullCalendar
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
initialView: 'dayGridMonth',
select: this.handleDateSelect,
eventClick: this.handleEventClick,
eventClickDelete: this.eventClickDelete,
locale: 'zh-cn',
firstDay: 0,
eventColor: '#3BB2E3',
timeGridEventMinHeight: '20',
aspectRatio: 1.2,
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
events: [
{ title: 'event 1', date: '2020-06-01', classNames: ['cal'] },
{ title: 'event 2', date: '2021-03-10', classNames: ['inv'] },
{ title: '公司会议', start: '2021-03-10 09:05', end: '2020-06-23 12:00', classNames: ['cal'] },
{ title: '部门会议', start: new Date(), classNames: ['cal'] }
],
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
},
headerToolbar: {
left: 'today',
center: 'prev title next',
right: 'dayGridMonth,timeGridWeek,listDay'
},
buttonText: {
prev: '',
next: '',
today: '今天',
month: '月视图',
week: '周视图',
day: '日视图',
list: '列表视图'
},
editable: true,
allDaySlot: false,
displayEventTime: true,
eventLimit: true,
displayEventEnd: false,
allowContextMenu: false,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
slotEventOverlap: false
}
}
},
mounted() {
this.getMyEchart()
},
methods: {
handleDateClick: function(arg) {
alert('date click! ' + arg.dateStr)
},
getMyEchart() {
console.log('啥也没有')
},
handleDateSelect(selectInfo) {
const title = prompt('请添加今日日程')
const calendarApi = selectInfo.view.calendar
calendarApi.unselect()
if (title) {
calendarApi.addEvent({
id: '13213541344131841324da1',
title: '',
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay,
classNames: ['cal']
})
}
},
handleEventClick(clickInfo) {
if (confirm(`确定删除吗 '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
}
}
<style lang="scss">
.fc-daygrid-event{
.fc-daygrid-event-dot{
display:none;
}
&.cal{
padding-left:5px;
color:#333;
border-radius: 0;
border:none;
font-size: 12px;
height: 30px;
border-left: 2px solid #5289FF;
background-color:#EEF3FF;
.fc-event-title{
color:#333;
}
}
&.inv{
padding-left:5px;
color:#333;
border-radius: 0;
border:none;
height: 30px;
line-height: 16px;
font-size: 16px;
border-left: 2px solid #FFA327;
background-color:#FFF6E9;
.fc-event-title{
color:#333;
}
}
}
.fc-timegrid-event{
.fc-daygrid-event-dot{
display:none;
}
&.cal{
padding-left:5px;
color:#333;
height: 30px;
font-size: 13px;
border-radius: 0;
border:none;
border-left: 2px solid #5289FF;
background-color:#EEF3FF;
.fc-event-title{
color:#333;
}
}
&.inv{
padding-left:5px;
color:#333;
border-radius: 0;
border:none;
height: 30px;
line-height: 16px;
font-size: 13px;
border-left: 2px solid #FFA327;
background-color:#FFF6E9;
.fc-event-title{
color:#333;
}
}
}
.fc .fc-toolbar-title{
display: inline-block;
vertical-align: middle;
}
.fc-theme-standard td{
border-top-color:transparent;
}
.boxWidth{
width: 800px;
}
</style>
手动添加点击删除日程的事件
![](https://i-blog.csdnimg.cn/blog_migrate/b9e66b68cb6cb5b0a2b16f55f386f5b7.png)