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

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