Introduction:
fullcalendar is a calendar plug-in that helps us implement calendar-related functions, official website documentation: https://fullcalendar.io/docs
Calendar style:
Main achievable functions:
Calendar: date click and drag multiple selection
Events: add events (to-do items) on the corresponding date/time, click the mouse to move in and out of the event, and drag the event to zoom in and out
Use timegrid-https://fullcalendar.io/docs/vue in vue2 project
(The introduction is incomplete, only the ones that have been used are involved)
-
Download
npm install –save @fullcalendar/vue @fullcalendar/core /vue Download in vue2 project, /core must be downloaded
npm install –save @fullcalendar/timegrid Download whichever style is used
npm install –save @fullcalendar/interaction Download if there is interaction
-
Introduction
<script> import FullCalendar from '@fullcalendar/vue' import timeGridPlugin from '@fullcalendar/timegrid' import interactionPlugin from '@fullcalendar/interaction' // import zhLocale from '@fullcalendar/core/locales/zh-cn'; //Chinese, I personally don’t think it’s very easy to use, especially after I customize the text of the button and so on </script>
3. Use
Structure:
<template> <FullCalendar ref="fullCalendar" :options="calendarOptions" /> //options is a configuration item </template>
Style + Behavior:
Style modification Directly use Google Chrome to view the style name in the structure, generally under the .fc class name
The cell width in the calendar is set in the group. No configuration item has been found yet. If anyone knows, welcome to comment
Configuration items (code at the bottom):
-
plugins: [timeGridPlugin, interactionPlugin], plugin: timegrid view + interaction, required
-
initialView: ‘timeGridWeek’, initial view/style, customizable, required
Custom initial view:
views: {
timeGridFourDay: { //name
type: 'timeGrid', // the name of a regular view
duration: { days: 4 } //custom item--here it is set to display only four days
}
}
-
headerToolbar: { The tool displayed in the header, which can be customized
start: ‘prev, next’,
center: ‘title’,
end: ‘timeGridWeek,timeGridDay,refresh’
},
Custom headerToolbar:
customButtons: { //custom buttons
refresh: { //button name
text: 'refresh', //displayed text
click: ()=>{ //Trigger event, use the arrow function this is the correct point
console.log('clicked the refresh button')
}
}
},
-
weekends: true, whether to display weekends
-
height: ‘100%’, the height of the form
-
slotDuration: “00:15:00”, the interval of time — here is 15 minutes
-
slotLabelInterval: “00:15:00”, how often to display a time label/text — here 15 minutes
Here slotDuration is 1 hour, slotLabelInterval is 1 hour
-
allDaySlot: false, whether to display allday, if there is no all-day event, it can not be displayed
-
slotMinTime: ’09:00:00′, start time
-
slotMaxTime: ’20:00:00′, end time — Note: each cell represents a time period, the maximum time is 20:00 and the last time label is 19:45
-
slotLabelFormat: { format of time label
hour: ‘numeric’, number format
minute: ‘2-digit’,
omitZeroMinute: false, still display when the minute is 00
meridiem: ‘short’,
hour12: false set the time to 24 hours
},
-
titleFormat: { year: ‘numeric’, month: ‘short’, day: ‘numeric’ }, header title format
-
dayHeaderFormat: { weekday: ‘long’, day: ‘numeric’, omitCommas: true omit comma }, header format
-
selectable: true, is it optional
-
selectOverlap: true, disable selection of time slots that are already occupied (events already exist)
-
eventClick: this.handleClick, stand-alone event, you can get a parameter info containing various information about the event
-
select: this.handleSelect, drag and drop to select
-
eventMouseEnter: this.handleMouseEnter, the mouse enter event
-
eventMouseLeave: this.handleMouseLeave, mouse out event
-
eventMaxStack: 4, the maximum number of events displayed in the same period, if exceeded, it will be displayed in a pop-up window
-
firstDay: 7, week start day
-
locale: zhLocale, if the language file is imported
-
events: [ Displayed events https://fullcalendar.io/docs/event-object
{
title: ‘event name’,
start: ‘event start time’, ‘2023-03-23 09:45:00’
end: ‘event end time’,
backgroundColor: ‘background color’,
borderColor: ‘border color’,
extendedProps: Put some event data, interactive events can be obtained from info.event._def.extendedProps
},
{}
],
<script>
//calendar configuration item
export default{
data(){
return {
calendarOptions: {
plugins: [timeGridPlugin, interactionPlugin],
initialView: 'timeGridWeek',
weekends: true, //display weekends
headerToolbar: { //head button
start: 'prev, next',
center: 'title',
end: 'timeGridWeek,timeGridDay,refresh'
},
height: '100%',
slotDuration: "00:15:00",//time interval
slotLabelInterval: "00:15:00",
allDaySlot: false, // remove allday
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short',
hour12: false //Set the time to 24 hours
},
titleFormat: { year: 'numeric', month: 'short', day: 'numeric' }, // header title format
dayHeaderFormat: { weekday: 'long', month: 'numeric', day: 'numeric', omitCommas: true },//header format
slotMinTime: '09:00:00',
slotMaxTime: '20:00:00',//start time
selectable: true, //Is it optional
//unselectAuto:false,
// selectOverlap: true, //Disable selection of already occupied time slots
events: [], //events
eventClick: this.handleClick, //stand-alone
// select: this.handleSelect, // select
eventMouseEnter: this.handleMouseEnter, //mouse moves in
eventMouseLeave: this.handleMouseLeave, //mouse leaves
eventMaxStack: 4,//The maximum number of display events in the same period
firstDay: 7,//week start day
// locale: zhLocale,
customButtons: { //custom buttons
refresh: { //Refresh button
text: 'refresh',
click: ()=>{
this. handleRefresh()
}
}
},
}
}
}
}
</script>