Vue組件之vue-full-calendar事件標題新增懸浮title屬性

新增如下標紅兩處代碼：

<template>
  <div class="app-container">
    <div class="table-container clearfix">
      <el-row class="pb16">
        <el-col :span="12">
          <el-button
            type="primary"
             icon="iconfont icon-add"
            @click=""
          >新增</el-button>
        </el-col>
        <el-col :span="12">
           <el-button
             class="fr"
            plain
             icon="iconfont icon-listView"
            @click=""
          >列表</el-button>
        </el-col>
      </el-row>
    </div>
    <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>
    <Footer></Footer>
  </div>

</template>
<script>
import { FullCalendar } from 'vue-full-calendar'
import "fullcalendar/dist/fullcalendar.css";
import Footer from "@/components/Footer";//底部版權信息
export default {
  components: { FullCalendar,Footer},
  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
        allDayText: '全天',
        navLinks: true, //允許天/周名稱是否可點擊
        defaultView: "agendaWeek", //顯示默認視圖
        eventClick: this.eventClick, //點擊事件
        dayClick: this.dayClick, //點擊日程表上面某一天
        eventRender: this.eventRender,//修改事件內容顯示格式
        displayEventEnd: true,//所有視圖顯示結束時間

       }
     }
  },
  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('div.fc-event-time').text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title); }
  }
}
</script>