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;
  }

暂时就修改这么多了,其他调整同理可达吧应该

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐