vue-fullcalendar前端日历插件的使用及样式修改
·
vue-fullcalendar GitHub地址
最终效果:
一、根据GitHub文档安装
npm install vue-fullcalendar@latest --save
二、main.js文件中写入
import fullCalendar from 'vue-fullcalendar'
Vue.component('full-calendar', fullCalendar)
三、页面引用
<full-calendar :events="fcEvents" lang="zh" @changeMonth="changeMonth"></full-calendar>
js中定义fcEvents,和切换月份事件,这个具体根据需求来。
ok,到目前为止已经初步完成调用,但是每天的事件内容我需要不同背景、字体颜色来区分,所以又稍作调整
查看源码可以看到,完全可以自定义class然后通过class去修改默认样式
所以在后台返回数据的时候根据事件内容返回不同的class,键名必须是cssClass,否则无法添加
接下来就是在页面写入css了
//默认的这个如果事件过多会占用下一行,所以把高度调整了下
/deep/ .full-calendar-body .dates .dates-events .events-week .events-day{
min-height:100px !important;
}
/deep/.future-class{
background-color:#0092ff !important;
color:#ffffff !important;
}
/deep/.did-class{
background-color:#13ce66 !important;
color:#ffffff !important;
}
/deep/.giveup-class{
background-color:#c0c4cc !important;
color:#ffffff !important;
}
/deep/.stop-class{
background-color:#e64242 !important;
color:#ffffff !important;
}
暂时就修改这么多了,其他调整同理可达吧应该
更多推荐
已为社区贡献6条内容
所有评论(0)