一、效果图
image.png
官网地址：Vue Component - Docs | FullCalendar
二、安装使用
1、使用 npm install 安装下列依赖
image.png
2、在需要使用的页面中引入
<FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
3、在页面中引入需要的插件
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
4、在data中设置日历的一些配置及属性
data(){
return{
calendarOptions:{
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
locale: 'zh',
firstDay: 1,
buttonText: {
today: "今天",
month: "月",
week: "周",
day: "日",
// list: "列表",
},
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay',
},
weekNumberCalculation: 'ISO',
nowIndicator: true,
height:500,
validRange: this.validRange, //设置可显示的总日期范围
eventTimeFormat: { // 在每个事件上显示的时间的格式
hour: 'numeric', // numeric:2022,2-digit:22
minute: '2-digit',
meridiem: false,
hour12: false // 设置时间为24小时
},
customButtons: {
next: {
click: this.nextClick
},
prev: {
click: this.prevClick
}
},
editable: false, //允许拖动缩放，不写默认就是false
overlap: false, //允许时间重叠，即可以与其他事件并存，不写默认就是false
events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
datesSet: this.datesSet, //日期渲染；修改日期范围后触发
eventClick: this.handleEventClick, //点击日程触发
dateClick: this.handleDateClick, //点击日期触发
eventDrop: this.calendarEventDropOrResize, //拖动事件触发
eventResize: this.calendarEventDropOrResize, //缩放事件触发
displayEventTime: false, //不显示具体时间
}
}
}
5、在methods中添加点击上一月、下一月和今天的事件
method:{
nextClick() {
this.$refs.fullCalendar.getApi().next() // 将日历向前移动一步（例如，一个月或一周）。
},
prevClick() {
this.$refs.fullCalendar.getApi().prev() // 将日历后退一步（例如，一个月或一周）。
}
}
6、在页面初始化数据完成后进行数据整合 让数据符合要求
形如：
obj={ id,title,start,end}
this.calendarOptions.events.push(obj);
