rx-fullcalendar

安装插件

npm install rx-fullcalendar
或：yarn add rx-fullcalendar

引入并注册插件

import Vue from 'vue'
import rxFullcalendar from 'rx-fullcalendar'
Vue.use(rxFullcalendar)

基本用法示例

<rx-fullcalendar
  :options="options"
  @changeDay="changeDay"
  @changeWeakDays="changeWeakDays"
  @changeMonth="changeMonth"
  @eventClick="eventClick"
  @dayClick="dayClick"
  @moreClick="moreClick"
>
</rx-fullcalendar>

options

options: {
       header: "day,week,month",
       firstDay: 1,
       locale: "zh-cn",
       dayTableHeaders: [
         {
           title: "序号1",
           key: "number1",
         }
       ],
       weeksTableHeaders: [
         {
           title: "序号1",
           key: "number1",
         }
       ],
       dayData: [
         {
           date: "2022-05-08",
           number1: "000015",
         },
       ],
       weekData: [
         {
           date: "2022-05-09",
           number1: "000015",
         },
       ],
       monthData: [
         {
           title: "睡觉",
           start: "2022-05-08",
           end: "2022-05-10",
           cssClass: ["family", "career"],
           YOUR_DATA: {},
         },
       ],
     }

Props

属性 | 说明 | 类型 | 默认值 :--- | :--- | :--- | :--- header | 控制视图的显示以及顺序 | String | day,week,month firstDay | 控制月历的星期一是第一天 | Number | 1 locale | 月历语言 | String | zh-cn dayTableHeaders | 日视图表格头的key和value | Array | [] weeksTableHeaders | 周视图表格头的key和value | Array | [] dayData | 日视图表格的数据 | Array | [] weekData | 周视图表格的数据 | Array | [] monthData | 月视图表格的数据 | Array | []

Events

事件名 | 说明 | 返回值 :--- | :--- | :--- changeDay | tab切换到日视图，改变日期的回调函数 | day（day） changeWeakDays | tab切换到周视图，改变周的回调函数 | weaks（weaks） changeMonth | tab切换到月视图，改变月的回调函数 | start, end, current（start, end, current） eventClick | tab切换到月视图，点击已存在事件的回调函数 | event, jsEvent, pos（event, jsEvent, pos） dayClick | tab切换到月视图，点击月历当天的回调函数 | day, jsEvent（day, jsEvent） moreClick | tab切换到月视图，已存在事件过多的时候会出现更多按钮，点击更多按钮的回调函数 | day, events, jsEvent（day, events, jsEvent）