Fullcalendar是一款用来管理日程安排、工作计划的日历工具,它功能非常强大而且非常实用。
因为工作的需要,我对vue的了解并不深,对Fullcalendar更没有了解,纯属功能的需要,大概花了一天的时间学习了一下,学习一样东西应该去看官网或者去看github里面的项目这样可以快速上手。学习总结一下方便自己查找
Fullcalendar github
官网
v4和v5更改,看文档少走弯路
第一步是安装与FullCalendar相关的依赖项
npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction
然后,您可以开始编写一个利用该组件的父组(DemoApp.vue):
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin, // needed for dateClick
],
locale: 'zh-cn', // 切换语言,当前为中文
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay",
},
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日',
},
initialView: "dayGridMonth",// 指定默认显示视图
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
allDayDefault:false,
// eventDisplay:'block',
moreLinkContent :'更多',//4.0 eventLimitText :'更多'
dayMaxEventRows :true,
slotDuration : "00:10:00", //一格时间槽代表多长时间,默认00:30:00(30分钟)
slotMinTime: "08:00:00",
slotMaxTime: "24:00:00",
allDayText : "全天",
handleWindowResize:true,//是否随浏览器窗口大小变化而自动变化。
lazyFetching : true, //是否启用懒加载技术--即只取当前条件下的视图数据,其它数据在切换时触发,默认true只取当前视图的,false是取全视图的
firstDay: '1', // 设置一周中显示的第一天是周几,周日是0,周一是1,以此类推
selectEventOverlap: false,
events: [
]
},
}
}
}
</script>
<template>
<FullCalendar :options="calendarOptions" />
</template>
动态绑定数据
for (var s of res.dataList) {
var date= Global.formatDate(s.sendDate, "yyyy-MM-dd");
this.calendarOptions.events.push({
title: '预约人:'+s.userName+'\n检测名称:'+s.sampleName+'',
start: date,
})
}