vue下使用fullcalendar及简单案例
ps:我真的感觉自己是个前端了,最近天天在写前端。不过很多复杂逻辑,后台处理起来比较麻烦,所以只让后台提供简单数据,前端封装处理数据确实比较方便!引子:最近公司要做个人日程管理,故鄙人思前想后,选择了fullcalendar组件。但!官方文档全是英文,对于英语四级都没过的我,真是很心累。只能发扬面向百度编程的优良传统,找了好多案例做出来了。现总结如下:vue下使用fullcalendar及简单案例
·
ps:我真的感觉自己是个前端了,最近天天在写前端。不过很多复杂逻辑,后台处理起来比较麻烦,所以只让后台提供简单数据,前端封装处理数据确实比较方便!
引子:最近公司要做个人日程管理,故鄙人思前想后,选择了fullcalendar组件。但!官方文档全是英文,对于英语四级都没过的我,真是很心累。只能发扬面向百度编程的优良传统,找了好多案例做出来了。现总结如下:
vue下使用fullcalendar及简单案例
- 使用版本:5.3.0
- 效果图
安装
在package.json中引入如下,运行“npm i”
"@fullcalendar/daygrid": "^5.3.0",
"@fullcalendar/interaction": "^5.3.0",
"@fullcalendar/list": "^5.3.0",
"@fullcalendar/timegrid": "^5.3.0",
"@fullcalendar/vue": "^5.3.0",
或者直接 “npm install -save *****”
运行报错,多半是因为乱七八糟的依赖版本冲突,要更换依赖版本。对了!安装前请把npm改成阿里云依赖下载,否则卡死。
安装成功的话,在package-lock.json中会有一条记录:
无需再main.js中引入
使用
基本使用
创建vue文件,在script中引入fullcalendar(哪个页面用哪里引)
<template>
<FullCalendar ref="fullCalendar"></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
//import引入的组件需要注入到对象中才能使用
components: { FullCalendar }
}
</script>
此时可以显示一个简单的日历了,但远远不是我们想要的。
注入事件和属性
- 代码:
<template>
<FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
//import引入的组件需要注入到对象中才能使用
components: { FullCalendar }
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
initialView: 'dayGridMonth',
locale: 'zh',
firstDay: 1,
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日',
list: '周列表',
},
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay listWeek',
},
height: 650,
validRange: this.validRange, //设置可显示的总日期范围
events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
datesSet: this.datesSet, //日期渲染;修改日期范围后触发
eventClick: this.handleEventClick, //点击日程触发
dateClick: this.handleDateClick, //点击日期触发
eventDrop: this.calendarEventDropOrResize, //拖动事件触发
eventResize: this.calendarEventDropOrResize, //缩放事件触发
displayEventTime: false, //不显示具体时间
},
validRange: {
start: '2021-09-01',
end: moment().add(6, 'months').format('YYYY-MM-DD'),
}
}
},
methods: {
datesSet(info) { //注意:该方法在页面初始化时就会触发一次
console.log(info)
// this.search() //请求本页数据
//虚拟数据
this.calendarOptions.events = [{
id: 111,
title: '任务1',
start: ‘2021-10-01’,
end: ‘2021-10-11’
color: ‘#ffcc99’,
editable: true, //允许拖动缩放,不写默认就是false
overlap: true, //允许时间重叠,即可以与其他事件并存,不写默认就是false
},{
id: 222,
title: '任务2',
start: ‘2021-10-12’,
end: ‘2021-10-20’
color: ‘#ffcc99’,
editable: true, //允许拖动缩放
}]
},
handleEventClick(info) {},
handleDateClick(info){},
calendarEventDropOrResize(info){}
}
}
</script>
- 参数说明:
- plugins::绑定的控件
- initialView:‘dayGridMonth’ 默认显示视图,月视图
- locale:‘zh’ 国际化,中文
- firstDay:1 星期的第一列显示,周一(0周日 1周一 2周二…)
- buttonText:buttonText 按钮文本
- headerToolbar:header 头部工具条
- height:日历高度
- validRange:validRange 全局日期范围;超出范围按钮会禁用
- 数据来源:
- events: [] 日程数据存放在这里,使用this.calendarOptions.events调用
- 事件说明:
- datesSet:修改日期范围后触发,即点击这三个按钮时触发
- eventClick:点击任务时触发
- dateClick: 点击日期触发
- eventDrop: 拖动事件触发
- eventResize: 缩放事件触发
其他的事件和属性以后用到再来补充!!
更多推荐
已为社区贡献1条内容
所有评论(0)