Rx-fullcalendar NPM

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）