导入包
npm 命令
npm install --save @fullcalendar/vue @fullcalendar/daygrid
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
组件注册
components: { FullCalendar, },
组件使用
<FullCalendar ref="calendarRef" :options="calendarOptions" />
日历的配置都在 calendarOptions里
具体操作
data () {
return {
//日历配置
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
locale: 'zh-cn', //? 配置中文
selectable: false,//可编辑
editable: true,//可拖拽
height: 'auto',
title: '月度计划配置',
firstDay: 1,
buttonText: { today: "今天", month: "月", week: "周", day: "日" },
eventDrop: this.eventDrop, // ?拖拽事件
// 头部按钮布局展示设置
headerToolbar: {
left: "title",
center: '',
right: 'prev today next',
},
events: this.monthData, //展示日历里面的数据
dateClick: this.handleDateClick, // 点击某一天 // 想要触发dateClick事件必须先安装引用interaction插件
eventClick: this.eventClick,
eventDidMount: this.eventDidMount,
eventWillUnmount: this.eventWillUnmount,
eventResizeStop: this.eventResizeStop,
viewDidMount: this.viewDidMount,
//自定义 hander 头部 按钮
customButtons: {
YearOrMonth: {
text: '自定义按钮1',
},
prevOrMonth: {
text: '上一月',
click: function () {
alert('点击了自定义按钮!');
}
}
},
},
monthData: [
{
title: 'eeeeeeeee', // 事件内容
start: '2018-12-11', // 事件开始时间
end: '2018-12-30', // 事件结束时间
cssClass: 'red' // 事件的样式 class名(由后台返回数据) red为自己定义的class名
},
{
title: 'sssss',
start: '2021-11-25',
cssClass: 'blue'
},
{
title: 'dddddddd',
start: '2021-11-09',
cssClass: 'blue'
},
{
title: 'cccccc',
start: '2021-11-20',
cssClass: 'red'
},
],
}
监听点击上下月按钮切换月份事件 监听点击今天按钮事件
mounted () {
this.monthPlan = new Date(),
this.calendarApi = this.$refs.calendarRef.getApi()
this.calendarApi.gotoDate(new Date) //跳转日期,
this.$nextTick(() => {
const prevBtn = document.querySelector('.fc-prev-button')
prevBtn.addEventListener('click', () => {
this.changeMonth()
})
const nextBtn = document.querySelector('.fc-next-button')
nextBtn.addEventListener('click', () => {
this.changeMonth()
})
const todayBtn = document.querySelector('.fc-today-button')
todayBtn.addEventListener('click', () => {
//渲染当月的里程
this.getMonthMileFn()
})
})
对应的一些方法
methods: {
eventDrop (event) {
// console.log("拖拽事假,", event);
if (this.nextMonth <= new Date().getTime(event.oldEvent._instance.range.start)) {
event.revert(); //恢复原状
this.$message.warning("不可操作!")
return
}
},
eventClick (event, el, jsEvent, view) {
// 点击某个事件
// console.log(event);
},
getMonthMileFn () {
//点击今天按钮 触发的事件
},
//监听日历,月份切换
changeMonth () {
console.log("月份已切换!");
const text = document.querySelector('.fc-toolbar-title').innerText
const year = text.substring(0, 4)
let month = text.substring(5, 7)
month = isNaN(month) ? text.substring(5, 6) : month
// const date = new Date(`${year}-${month}`)
// console.log(date);
const dateStr = new Date(`${year}-${month}`)
},
// 上一年点击
prevYearCustomClick () {
console.log("你悄悄的点击了我!");
},
// 切换到上一页
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'
},
// 事件被渲染
eventDidMount (info) {
// console.log(info)
console.log('事件被渲染');
document.querySelector('.fc-prev-button').innerText = '上个月'
document.querySelector('.fc-next-button').innerText = '下个月'
},
eventWillUnmount (info) {
// console.log(info)
console.log("这是什么事件?");
},
// 新增事件后回调
afterEventAdd () {
console.log('afterEventAdd')
},
// 点击某一天
handleDateClick: function (arg) {
console.log('date click! ' + arg.dateStr)
},
eventResizeStop (event) {
console.log('回调函数,当日程事件调整(resize)结束的时候触发');
},
viewDidMount (info) {
console.log('日历组件渲染结束的时候触发');
},
}