Installation and reference
yarn add --save @fullcalendar/vue @fullcalendar/core
yarn add --save @fullcalendar/daygrid
yarn add --save @fullcalendar/timegrid
yarn add --save @fullcalendar/interaction
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
common attributes
More attributes can be found on the official website or other articles, here are only the ones I use
calendarOptions: {
// FullCalendar的配置
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], // 需要用哪个插件引入后放到这个数组里
initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
initialView: 'timeGridWeek', // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
locale: 'zh-cn', // 设置日历的语言，中文为 “zh-cn”
firstDay: new Date().getDay(), // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推 new Date().getDay()当前天
allDaySlot: false,//是否显示日历上方的allDay
weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
selectable: true, // 是否可以选中日历格
selectOverlap: false, // 是否允许重叠
slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
eventOverlap: false, // 拖拽时是否重叠
nowIndicator: true, // 当前的时间线显示,为true时当前小时那一格有个红线，并且有红三角
aspectRatio: "2.0", // 设置日历的宽高比率
buttonText: {
// 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
today: '今天',
month: '月',
week: '周',
day: '天'
},
headerToolbar: {
// 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
left: 'today next',
center: 'title',
right: 'confirmBtn'
},
eventTimeFormat: {
// 在每个事件上显示的时间的格式
hour: 'numeric', // numeric:2022,2-digit:22
minute: '2-digit',
meridiem: false,
hour12: false // 设置时间为24小时
},
events: [], // 日历上的事件
customButtons: {
// 自定义按钮
confirmBtn: {
text: '确定',
click: this.confirm
}
},
businessHours: undefined,
// select: this.handleSelect,
// selectAllow: this.handlerAllow,
// eventClick: this.cancelClick, // 点击事件时，触发该回调
// eventMouseLeave: this.handleDateHover, // 停止拖拽
// dateClick: this.handleDateClick // 当用户单击日期或时间时触发
dateClick: this.handleEvent, // 点击日期
eventDrop: this.eventDrop, // 拖拽停止触发的事件
eventConstraint: {
// 设置可以拖放的时间段
start: this.transformDate(new Date(new Date().getTime()), 2),
end: this.transformDate(new Date(new Date().getTime()), 3),
},
selectConstraint: {
// 设置可以拖动创建新事件的时间段
start: this.transformDate(new Date(new Date().getTime()), 2),
end: this.transformDate(new Date(new Date().getTime()), 3),
},
},
Add button at the top of the calendar
headerToolbar: {
// 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
left: 'today next',
center: 'title',
right: 'confirmBtn' // 这里将新建按钮设置在右边
},
customButtons: {
// 自定义按钮
confirmBtn: {
text: '确定', // 按钮文字
click: this.confirm // 按钮点击事件
}
Click next week or today for a starting time
Get activeStart and activeEnd for the corresponding button binding event
customButtons: {
// 自定义按钮
next: {
click: this.nextWeek
},
today: {
text: '今天',
click: this.curWeek
},
},
nextWeek () {
// 下周
this.calendarApi.next() // this.calendarApi = this.$refs.fullCalendar.getApi()
const startTime = this.calendarApi.view.activeStart // 起始时间
const endTime = calendarApi.view.activeEnd // 终止时间
},
curWeek () {
// 本周
this.calendarApi.today() // this.calendarApi = this.$refs.fullCalendar.getApi()
const startTime = this.calendarApi.view.activeStart
const endTime = calendarApi.view.activeEnd;
}
Time format processing related
In fact, it is the splicing of strings
// 时间格式处理,status为0只返回2022-10-28,为1返回2022-10-28 20:30,为2返回2022-10-28 20:30:00,为3返回2122-10-28 20:30:00
transformDate (date, status) {
let sign2 = ":"
let year = date.getFullYear() // 年
let month = date.getMonth() + 1 // 月
let day = date.getDate() // 日
let hour = date.getHours() // 时
let minutes = date.getMinutes() // 分
// 给一位数的数据前面加 “0”
if (month >= 1 && month <= 9) {
month = "0" + month
}
if (day >= 0 && day <= 9) {
day = "0" + day
}
if (hour >= 0 && hour <= 9) {
hour = "0" + hour
}
if (minutes >= 0 && minutes <= 9) {
minutes = "0" + minutes
}
if (status === 0) {
return year + "-" + month + "-" + day
}
else if (status === 1) {
return year + "-" + month + "-" + day + " " + hour + sign2 + minutes
} else if (status === 2) {
return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + "00"
} else if (status === 3) {
year += 100
return year + "-" + month + "-" + day + " " + hour + sign2 + minutes
}
},
create new event
I read many articles and use it calendarOptions.events.push(newEvent). My practice is that if you click on a time period, the side scrolling axis will jump to the middle. If you choose an earlier time period, the scrolling axis jumps to the middle, and the experience is obviously not good, so here is used:this.calendarApi.view.calendar
this.calendarFunc = this.calendarApi.view.calendar
this.calendarFunc.addEvent(newEvent)// 添加事件
this.calendarFunc.getEventById('事件id').remove()//移除事件
delete all events
My side is to add id to each piece of data obtained, id is equal to the subscript, and delete it in a for loop when it is removed
let i = 0
list.forEach((item) => {
// 最开始获取事件
item['color'] = 'gray'
item['editable'] = false
item['overlap'] = false
item['title'] = '不可选择时间'
item['id'] = i++ // id等于数组下标
this.calendarFunc.addEvent(item)
})
let len = this.calendarFunc.getEvents().length // 获取事件数量
for (let i = 0; i < len; i++) {
// for循环逐个删除
this.calendarFunc.getEventById(i).remove()
}
Only one time period can be selected at a time
The idea is to fix the number of event lists. For example, 20 created events are obtained from the backend. Because only one time period can be selected at a time, the user's operation is only to create and delete the 21st event.
Use the number of events as the event id, each time you click to determine whether there is an event with this id, if so, delete the event and create a new event, otherwise create a new event directly, so how to change it is to create and delete the last event to achieve Function
if (this.calendarFunc.getEventById(this.listLength)) {
this.calendarFunc.getEventById(this.listLength).remove()
}
this.calendarFunc.addEvent(newEvent)
It is grayed out by the reserved time period and cannot be edited
The list returned by the backend:
To implement the function, it is necessary to add non-editable, non-overlapping, and gray attributes to each object, and then addthis.calendarFunc
list.forEach((item) => {
// 被预约的时间段
item['color'] = 'gray'
item['editable'] = false // 不可编辑
item['overlap'] = false // 不可重叠
item['title'] = '不可选择时间'
this.calendarFunc.addEvent(item)
})
Past time cannot be selected
The past time cannot be selected, which means that you can only drag and drop and create new events after the current time
eventConstraint: {
// 设置可以拖放的时间段为当下到100年后
start: this.transformDate(new Date(new Date().getTime()), 2),
end: this.transformDate(new Date(new Date().getTime()), 3),
},
selectConstraint: {
// 设置可以拖动创建新事件的时间段为当下到100年后
start: this.transformDate(new Date(new Date().getTime()), 2),
end: this.transformDate(new Date(new Date().getTime()), 3),
},
But after I tried it, I found that although the events in eventConstraint and selectConstraint cannot be dragged to the past time, the past time can still be clicked to create a new event, so I made a judgment on the dateClick: this.handleEventhandleEvent time
handleEvent (info) {
// 事件处理
if (info.date > new Date().getTime()) {
// 过去时间段不可预约
}
},
Change the background color of the day
You can find the corresponding part in the console and /deep/change the content of the corresponding class with
<style lang="less" scoped>
/deep/ .fc .fc-timegrid-col.fc-day-today {
background-color: rgb(240, 242, 245);
}
/deep/ .fc .fc-daygrid-day.fc-day-today {
background-color: rgb(240, 242, 245);
}
</style>