Vue之日歷控件vue-full-calendar的使用

(1).安裝依賴

npm install vue-full-calendar　

npm install moment

因為這是日歷插件用到了時間工具類 === moment　

(2).文件中導入依賴

在想要用此插件的文件中導入依賴

  import { FullCalendar } from 'vue-full-calendar'
  import "fullcalendar/dist/fullcalendar.css";

注冊到組件中

components: { FullCalendar },

我的代碼：

<template>
<div class="fullCalendarCont">
      <el-date-picker
        size="small"
        style="width: 144px;"
        v-model="selectDate"
        type="date"
        placeholder="選擇時間"
        @change="changeDate">
      </el-date-picker>
      <full-calendar
        :config="config"
        :events="events"
        ref="calendar"
      ></full-calendar>
  </div>
</template>
<script>
  import { FullCalendar } from 'vue-full-calendar'
  import "fullcalendar/dist/fullcalendar.css";
  export default {
    components: { FullCalendar},
    data() {
      return {
        selectDate:'',//日期選擇器選中的月份
        events: [{
          id:1,
          title:'出差',
          start: '2020-07-20', // 事件開始時間
          end: '2020-07-21',   // 事件結束時間
        }, {
          id:2,
          title:'春游',
          start: '2020-07-12 09:00:00',
          end: '2020-07-18 12:00:00',
        }, {
          id:3,
          title:'春游2',
          start: '2020-07-12 09:00:00',
          end: '2020-07-12 12:00:00',
        }, {
          id:4,
          title:'春游3',
          start: '2020-07-26 13:00:00',
          end: '2020-07-26 15:00:00',

        }, {
          id:5,
          title:'春游4',
          start: '2020-07-26 15:00:00',
          end: '2020-07-26 16:00:00',
        }],
        config: {
          firstDay:'0',//以周日為每周的第一天
          buttonText: { today: "今天", month: "月", week: "周", day: "日" },
          header: {left:'today', center: 'prev, title, next'},
          theme:false,//是否允許使用jquery的ui主題
          height:'auto',
          slotLabelFormat:'H:mm', // axisFormat 'H(:mm)'
          //slotLabelInterval:1,
          views: {
            month: {
              titleFormat: 'YYYY年MMM'
            },
            day: {
              titleFormat: 'YYYY年MMMDD日 dddd'
            }
          },
          monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
          dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
          slotDuration:'00:30:00',
          minTime:'00:00',
          maxTime:'24:00',
          locale: "zh-cn",
          editable: false, //是否允許修改事件
          selectable: false,//是否允許用戶單擊或者拖拽日歷中的天和時間隙
          eventLimit: false, // 限制一天中顯示的事件數，默認false
          allDaySlot:true, //是否顯示allDay
          displayEventEnd: false,//是否顯示結束時間
          allDayText: '全天',
          navLinks: true, //允許天/周名稱是否可點擊
          defaultView: "agendaWeek", //顯示默認視圖
          eventClick: this.eventClick, //點擊事件
          dayClick: this.dayClick, //點擊日程表上面某一天
          eventRender: this.eventRender

        }
      }
    },
    methods: {
      changeDate(){
        this.$refs.calendar.fireMethod('gotoDate', this.selectDate)
      },
      // 點擊事件
      eventClick (event, jsEvent, pos) {
        alert('eventClick', event, jsEvent, pos)
      },
      // 點擊當天
      dayClick (day, jsEvent) {
        alert('dayClick', day, jsEvent)
      },
      eventRender:function (event, element) {
        element.find('.fc-title').attr('title',event.title)
      }
    }
  }
</script>