前段事件用fullcalendar插件做了一个日历,因为和系统框架不一致,改用了element el-calendar
两个插件都实现了所有功能,但总的来说,Fullcalendar好用很多,毕竟文档全,功能也全
如果没有规定一定要用某个插件,推荐使用Fullcalendar,附上官方文档参考
FullCalendar文档:https://fullcalendar.io/
接下来就是element el-calendar 了,也附上官方文档
element el-calendar 文档:https://element.eleme.cn/#/zh-CN/component/calendar
效果图:
功能:把后台数据放到日历上;点击日历空白处弹出弹框添加数据;点击日历中某一个事件,弹出对话框,对数据进行修改删除
看起来似乎还不错的亚子,,但是我还是药吐槽一下官网的文档内容太少!!!!!
能这样显示完全是因为前期做了fullcalendar,有一个美观一点的样式做参考
让数据准确显示到日历上,我参考了网友的方法,做了循环
没记错的话应该是这个网友:https://blog.csdn.net/MISS_CJL/article/details/102722704 实现了数据显示的功能
自己做的增删改主要在对应的位置放了@click,贴下主要代码
<template>
<div>
<el-calendar id="calendar" v-model="value">
<template
slot="dateCell"
slot-scope="{date, data}"
>
<div>
<div class="data.isSelected ? 'is-selected' : ''" @click="handleAddClick(data.day)">{
{