一焙蚓、效果圖
image.png
官網(wǎng)地址：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中設(shè)置日歷的一些配置及屬性
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, //設(shè)置可顯示的總?cè)掌诜秶? eventTimeFormat: { // 在每個事件上顯示的時間的格式
hour: 'numeric', // numeric:2022,2-digit:22
minute: '2-digit',
meridiem: false,
hour12: false // 設(shè)置時間為24小時
},
customButtons: {
next: {
click: this.nextClick
},
prev: {
click: this.prevClick
}
},
editable: false, //允許拖動縮放君丁，不寫默認就是false
overlap: false, //允許時間重疊，即可以與其他事件并存将宪，不寫默認就是false
events: [], //背景色 (添加相同時間的背景色時顏色會重疊)
datesSet: this.datesSet, //日期渲染绘闷；修改日期范圍后觸發(fā)
eventClick: this.handleEventClick, //點擊日程觸發(fā)
dateClick: this.handleDateClick, //點擊日期觸發(fā)
eventDrop: this.calendarEventDropOrResize, //拖動事件觸發(fā)
eventResize: this.calendarEventDropOrResize, //縮放事件觸發(fā)
displayEventTime: false, //不顯示具體時間
}
}
}
5、在methods中添加點擊上一月较坛、下一月和今天的事件
method:{
nextClick() {
this.$refs.fullCalendar.getApi().next() // 將日歷向前移動一步（例如印蔗，一個月或一周）。
},
prevClick() {
this.$refs.fullCalendar.getApi().prev() // 將日歷后退一步（例如丑勤，一個月或一周）华嘹。
}
}
6、在頁面初始化數(shù)據(jù)完成后進行數(shù)據(jù)整合 讓數(shù)據(jù)符合要求
形如：
obj={ id,title,start,end}
this.calendarOptions.events.push(obj);
