vue-lunar-full-calendar的使用方法

效果圖 

首先安裝：

npm install --save vue-lunar-full-calendar

在main.js中全局引入：

import LunarFullCalendar from "vue-lunar-full-calendar";
Vue.use(LunarFullCalendar);

在需要用到的頁面引入組件

data() {
        let self = this;
        return {
    events:[],
    config: {
            eventLimitText: '更多',
            lunarCalendar: true,//控制中文日曆是否顯示爲真
             locale:'zh-cn',//中文
            eventColor: 'white',
            header: {
              left: 'prevYear,prev,next,nextYear',
              center: 'title',
              right: 'hide,custom, today'
            },
            eventLimit: true, // 一天中顯示多少條事件，多了隱藏
            firstDay: 0, // 控制週一週日那個在前面
            defaultView: 'month',
            buttonText: {
              today: '今天',
              month: '月',
              week: '周',
              day: '日'
            },
                //分頁方法
            viewRender(view, element) {
              self.viewRender(view, element);
            },
            customButtons: { // 新增按鈕
              hide: {
                text: '隱藏農曆',
                click: function () {
                  self.$refs.calendar.fireMethod('option', {
                    lunarCalendar: false
                  })
                  self.$refs.calendar.fireMethod('option', {
                    header: {
                      left: 'prevYear,prev,next,nextYear',
                      center: 'title',
                      right: 'show,custom, today'
                    }
                  })
                }
              },
              show: {
                text: '顯示農曆',
                click: function () {
                  self.$refs.calendar.fireMethod('option', {
                    lunarCalendar: true
                  })
                  self.$refs.calendar.fireMethod('option', {
                    header: {
                      left: 'prevYear,prev,next,nextYear',
                      center: 'title',
                      right: 'hide,custom, today'
                    }
                  })
                }
              },
            },
          },
        }
       }

 

viewRender (view, element) {
      var  time = view.calendar.currentDate._i;
      this.years=this.$moment(time).format('YYYYMM')
      this.initData(this.years)
    },

 

 //日曆事件點擊事件
eventClick (event, jsEvent, pos) {
    
    },
//背景點擊事件
    dayClick (date, jsEvent, view) {
     
    },

詳細 可參考 fullcalendar文檔