关于vue.js: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;
          }
        }
      }
    }
  }
}