1、安裝@fullcalendar插件
npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction
2、使用
<template>
<FullCalendar
:options="calendarOptions"
timezone="local"
locale="zh-cn"
firstDay="1"
style="padding-top:10px"
/>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
// import dayGridPlugin from '@fullcalendar/daygrid'
// import interactionPlugin from '@fullcalendar/interaction'
import timegridPlugin from '@fullcalendar/timegrid'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [timegridPlugin],//擴展
initialView: 'timeGridWeek',//視圖類型
allDaySlot: false,//確定“全天”位置是否顯示在日歷的頂部 默認為true
slotDuration: '00:30:00',//顯示時隙的頻率
//頭部標題格式化
titleFormat: {
month: '2-digit',
day: 'numeric'
},
//表頭格式化
dayHeaderFormat: {
// weekday: 'long',
month: '2-digit',
day: '2-digit',
omitCommas: true
},
//左側時間軸格式化
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false //設置時間為24小時
},
//事件時間格式化
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
meridiem: false,
hour12: false //設置時間為24小時
},
//頭部按鈕布局
headerToolbar: {
left: '',
center: 'timeGridDay,timeGridWeek',
right: 'prev,next'
},
//頭部按鈕內容重寫
buttonText: {
//prev: '昨天',
//next: '明天',
prevYear: '去年',
nextYear: '明年',
today: '今天',
month: '月',
week: '周',
day: '日'
},
//事件集合
events: [
//title:標題 start：開始時間 end：結束時間
{title: '部門會議1', start: new Date(), end: new Date('2021/3/10 15:30:20')},
{title: '部門會議2', start: new Date('2021/3/8 12:12:20'), end: new Date('2021/3/8 15:18:20')},
{title: '部門會議3', start: new Date('2021/3/7 10:12:20'), end: new Date('2021/3/7 13:18:20')}
],
//表頭內容注入
dayHeaderContent: function (arg) {
//周索引
let weekDay = arg.dow
let weekName;
switch (weekDay) {
case 0:
weekName = "周日"
break;
case 1:
weekName = "周一"
break;
case 2:
weekName = "周二"
break;
case 3:
weekName = "周三"
break;
case 4:
weekName = "周四"
break;
case 5:
weekName = "周五"
break;
case 6:
weekName = "周六"
break;
}
weekName += " " + arg.text.replace('/', '-')
return weekName
}
}
}
},
mounted() {
}
}
</script>
<style>
.fc .fc-timegrid-body {
min-height: 1055px;
}
.fc .fc-timegrid-slots {
border-bottom: 1px solid #ddd;
}
.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {
background-color: #2d8cf0;
border: none;
border-radius: 4px;
margin-right: 10px;
}
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
background-color: #2d8cf0;
border: none;
border-radius: 4px;
}
.fc .fc-button-group > .fc-button:focus, .fc .fc-button-group > .fc-button:active, .fc .fc-button-group > .fc-button.fc-button-active{
z-index: 0;
}
</style>
4、npm run serve或者npm run dev 將項目跑起來
瀏覽如下
