vue 中 fullcalendar 使用案例

fullcalendar官網

使用版本：@fullcalendar/vue": "^5.3.1"

<template>
  <div class="calendar">
    <div class="top-content">
      <!-- <div id="tooltip" title="">I'm a tooltip</div> -->
      <!-- <div id="tooltip1">I'm a tip of tooltip</div> -->
      <div class="left">
        <span @click="prevFn" class="op el-icon-arrow-left"></span>
        <span>2020年xx月 第x周</span>
        <span @click="nextFn" class="op el-icon-arrow-right"></span>
      </div>
      <div class="center">
        <el-input v-model="filterKey"
          placeholder="搜索"
          suffix-icon="el-icon-search"
          @keyup.enter.native="searchFn"
          size="small" />
      </div>
      <div class="right">
        <el-button @click="todayFn" type="primary" class="today-btn">今日</el-button>
        <el-radio-group v-model="viewType" @change="changeViewTypeFn">
          <el-radio-button label="dayGridMonth">月</el-radio-button>
          <el-radio-button label="timeGridWeek">周</el-radio-button>
          <el-radio-button label="listWeek">日程</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="calendar-content">
      <div class="event-info">
        <div class="tags">
          <span class="level level-1"></span>
          <span class="label">緊急變動</span>
        </div>
        <div class="tags">
          <span class="level level-2"></span>
          <span class="label">常規變動（重大、較大）</span>
        </div>
        <div class="tags">
          <span class="level level-3"></span>
          <span class="label">常規變動（通常、中等）</span>
        </div>
        <div class="tags">
          <span class="level level-4"></span>
          <span class="label">標準變動</span>
        </div>
        <div class="event-size">
          本月變動共計：
          <span class="num">18</span>
          條
        </div>
      </div>
      <FullCalendar ref="calendarRef" :options="calendarOptions">
        <!-- <template #eventContent="{ timeText, event }">
            <b>{{ timeText }}</b>
            <i>{{ event.title }}</i>
        </template> -->
      </FullCalendar>
    </div>
  </div>
</template>

<script>
import module from './calendar.js'
export default {
  ...module
}
</script>

<style lang="scss" scoped>
@import './calendar.scss';
</style>

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin  from '@fullcalendar/timegrid'
import listPlugin   from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
import $ from 'jquery'
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.css'
window.$ = $

// fc-day-sat  週六加樣式的方式
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      filterKey: '', // 搜索條件
      viewType: 'dayGridMonth', // 顯示方式
      // 日曆配置項
      calendarOptions: {
        locale: "zh-cn", // 中文
        height: '100%',
        plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick, // 點擊某一天 // 想要觸發dateClick事件必須先安裝引用interaction插件
        eventClick: (event, el, jsEvent, view) => { // 點擊某個事件
          console.log('eventClick')
          console.log(event, el, jsEvent, view)
        },
        eventDidMount: this.eventDidMount,
        eventWillUnmount: this.eventWillUnmount,
        viewDidMount: (info) => {
          console.log('viewDidMount')
        },
        // eventAdd: this.afterEventAdd,
        headerToolbar: false,
        // headerToolbar: {
        //   left: 'title',
        //   center: '',
        //   right: ''
        // },
        // buttonText: {
        //   today: 'today',
        //   month: 'month',
        //   list: 'list'
        // },
        // timeGridEventMinHeight: '20', // 設置事件的最小高度
        aspectRatio: 1.65, // 設置日曆單元格寬度與高度的比例
        // dayMaxEventRows: 2, // ???
        dayMaxEvents: 3,
        events: [{
          id: 1,
          title: 'BCH237',
          start: '2020-11-12T10:30:00',
          end: '2020-11-12T11:30:00',
          extendedProps: {
            department: 'BioChemistry'
          },
          description: 'Lecture'
        }],
        slotEventOverlap: false, // 相同時間段的多個日程視覺上是否容許重疊，默認true容許
        noEventsContent: '暫無變動',
      }
    }
  },
  computed: {
  },
  mounted () {
    this.addDayEvent()
    // this.$nextTick(() => {
    //   $("#tooltip").tooltip({
    //     content: $('#tooltip1')
    //   });
    // })
  },
  methods: {
    // 切換到上一頁
    prevFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.prev()
    },
    // 切換到下一頁
    nextFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.next()
    },
    // 切換到今天
    todayFn () {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.today()
    },
    // 獲取當前描述
    getCurrentTitle () {

    },
    // 切換顯示類型
    changeViewTypeFn (type) {
      const calendarApi = this.$refs.calendarRef.getApi()
      calendarApi.changeView(type) // , '2020-11-05'
    },
    // 按日添加事件
    addDayEvent () {
      const calendarApi = this.$refs.calendarRef.getApi()

      // 添加當月事件
      calendarApi.addEvent(this.genEvent('level-1'))
      calendarApi.addEvent(this.genEvent('level-2'))
      calendarApi.addEvent(this.genEvent('level-3'))
      calendarApi.addEvent(this.genEvent('level-4'))
      calendarApi.addEvent(this.genEvent('level-2'))
      calendarApi.addEvent(this.getVacation())
    },
    // 獲取假期
    getVacation () {
      const id = new Date().getSeconds() + Math.floor(Math.random() * 10000)
      return {
        id: id,
        date: '2020-11-05',
        classNames: 'event-cls-vacation',
        display: 'background',
        color: '#eee',
        // daysOfWeek: [0, 6]
      }
    },
    // 根據類型獲取事件
    genEvent (type) {
      const id = new Date().getSeconds() + Math.floor(Math.random() * 10000)
      const tempObj = {
        id: id,
        title: type,
        date: '2020-11-05',
        // startTime: '09:10:00',
        // endTime: '10:10:00',
        start: "2020-11-05T09:10:00+00:00",
        end: '2020-11-05T09:00:05+00:00',
      }
      tempObj.classNames = ['event-cls', 'event-cls-' + type]
      tempObj.display = 'list-item'
      if (type === 'level-1') {
        tempObj.textColor = 'white'
        tempObj.backgroundColor = 'red'
      } else if (type === 'level-2') {
        tempObj.textColor = 'white'
        tempObj.backgroundColor = 'orange'
      } else if (type === 'level-3') {
        tempObj.textColor = 'white'
        tempObj.backgroundColor = 'yellow'
      } else if (type === 'level-4') {
        tempObj.textColor = 'white'
        tempObj.backgroundColor = 'blue'
      }
      return tempObj
    },
    // 搜索
    searchFn () {

    },
    // 事件被渲染
    eventDidMount (info) {
        console.log('eventDidMount')
        console.log(info)
        if (!$(info.el).tooltip( "instance" )) {
          $(info.el).attr('title', '')
          $(info.el).tooltip({
            content: '<a style="color: red">aaaaaaa</a>',// $('#tooltip1'),
            position: { my: "left+0 center", at: "left center" }
          });
        } else {
          $(info.el).tooltip('disable')
          $(info.el).tooltip('destroy')
        }
    },
    eventWillUnmount (info) {
      if ($(info.el).tooltip( "instance" )) {
        $(info.el).tooltip('disable')
         $(info.el).tooltip('destroy')
      }
    },
    // 新增事件後回調
    afterEventAdd () {
      console.log('afterEventAdd')
    },
    // 點擊某一天
    handleDateClick: function(arg) {
      console.log('date click! ' + arg.dateStr)
    }
  }
}

.calendar {
  width: 100vw;
  height: 100vh;
  .top-content {
    display: flex;
    align-items: center;
    padding: 20px;
    box-shadow: 0px 0px 10px #eee;
    .left {
      display: flex;
      align-items: center;
      margin-right: 30px;
      line-height: 24px;
      font-weight: bold;
      .op {
        cursor: pointer;
        font-size: 18px;
        padding: 0 10px;
        line-height: 24px;
        &:hover {
          color: #3e3bee;
        }
      }
    }
    .center {
      flex: 1;
      .el-input {
        width: 300px;
      }
    }
    .today-btn {
      margin-right: 20px;
    }
  }

  .calendar-content {
    height: calc(100% - 73px);
    padding: 20px;
    overflow-y: auto;
    .event-info {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      .tags {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .level {
          display: inline-block;
          width: 16px;
          height: 16px;
          &.level-1{
            background-color: red;
          }
          &.level-2{
            background-color: orange;
          }
          &.level-3{
            background-color: yellow;
          }
          &.level-4{
            background-color: blue;
          }
        }
        .label {
          margin-left: 10px;
          font-size: 12px;
          height: 16px;
          line-height: 16px;
        }
      }
      .event-size {
        flex: 1;
        text-align: right;
        font-size: 12px;
        .num {
          color: orange;
        }
      }
    }
  }

  >>> .fc {
    // 展現某月
    .fc-dayGridMonth-view {
      // 頭部樣式
      .fc-col-header-cell {
        background-color: #e7ebfd;
      }
      // 日
      .fc-daygrid-day {
        // 事件樣式
        .event-cls {
          .fc-daygrid-event-dot {
            border-radius: 0;
            border-left-width: 3px;
            border-right-width: 3px;
            border-top-width: 6px;
            border-bottom-width: 6px;
            margin-right: 8px;
          }
          .fc-event-title {
            color: blue;
          }
        }

        // 日期文本靠左
        .fc-daygrid-day-top {
          direction: rtl;
        }
        // 休息日
        .event-cls-vacation {
          opacity: 0.8;
          &::after {
            content: '休';
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background: orange;
            border-bottom-left-radius: 10px;
          }
        }
      }
    }
  }
}