vue-fullcalendar插件

------------恢复内容开始------------

参考 ：

https://blog.csdn.net/w3chhhhhh/article/details/90256252

https://blog.csdn.net/ju__ju/article/details/103117790

https://blog.csdn.net/ju__ju/article/details/103117790

https://blog.csdn.net/qq_33594380/article/details/79738423

 

<template>
  <div class="container" style="width:60%; margin: 0 auto;">
    <FullCalendar
      :plugins="calendarPlugins"
      :slotEventOverlap="false"
      :allDaySlot="false"
      :header="{
        left:'prev',
        center:'title',
        right: 'today ,next'
      }"
      :events="[
        {
          title: '计算机学院小组会议',
          start: '2020-04-01 10:00:00',
          end: '2020-04-01 16:00:00',
          color:'orange'
        },
        {
          start: '2020-04-02 10:00:00',
          end: '2020-04-02 14:00:00',
          title: '东南大学计算机学术会议',
          color:'green'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        },
        {
          start: '2020-03-31 10:00:00',
          end: '2020-03-31 14:00:00',
          title: '东南大学计算机学术会议',
          color:'red'
        }

      ]"
      :button-text="{
        today: '今天'
      }"
      :slotLabelFormat="{ // 周，日视图时，左侧的显示的时间格式，以下为：00:00，00:30...5:30
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: false,
        meridiem: 'short',
        hour12: false
      }"
      :columnHeaderHtml="columnHeaderHtml"
      default-view="timeGridWeek"
      :unselect-auto="false"
      :select-overlap="false"
      :select-allow="handlerSeelctAllow"
      select-mirror="false"
      selectable="true"
      slot-duration="00:15:00"
      slot-label-interval="01:00"
      locale="zh-cn"
      @dateClick="handleDateClick"
      @select="handleSelect"
    />
  </div>
</template>
 
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlulgin from '@fullcalendar/timegrid'
import '@fullcalendar/core/locales/zh-cn' // 支持中文
//import momentPlugin from '@fullcalendar/moment'
import interactionPlugin from '@fullcalendar/interaction'
import { get, post } from "@/api/ylapi"
import { mapGetters } from "vuex"

export default {
  components: {
    FullCalendar
  },
  data () {
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlulgin, interactionPlugin],
      // 随时判断时间是否合法，通过返回true/false来判断是否能够选择
      handlerSeelctAllow: info => {
        const currentDate = new Date()
        const start = info.start
        const end = info.end
        return (start <= end && start >= currentDate)
      },
      columnHeaderHtml: function (date) {
        let map = {
          0: '周日',
          1: '周一',
          2: '周二',
          3: '周三',
          4: '周四',
          5: '周五',
          6: '周六'
        }
        let month = date.getMonth() + 1
        let day = date.getDate()
        let week = date.getDay()
        return map[week]
          + '<br>'
          + (month < 10 ? ('0' + month) : month)
          + '/'
          + (day < 10 ? ('0' + day) : day)
      },
    }
  },
  created () {
    this.getConferenceRecord()
  },
  computed: {
    ...mapGetters(["staffId"])
  },
  methods: {
    //获取当前周的所有会议
    async getConferenceRecord () {
      let reqStr = {
        "autoCount": true,
        "confTypes": ["NC", "VGCP"],
        "data": null,
        "limit": 1000,
        "orderbys": [
          {
            "field": "conferenceTimePattern.conferenceTime.startDateTimeStamp",
            "order": 1
          }
        ],
        "role": null,
        "skip": 0,
        "states": ["ready", "create", "ongoing", "end"],
        "total": 0
      }
      const res = await post(`/conference/record/${this.staffId}/pagedList`, reqStr)
      if (res.ret > 0) {

      }
    },
    // 当点击时候
    handleDateClick (arg) {
      console.log(arg)
    },
    // 当选择结束的时候获取开始和结束时间
    handleSelect (info) {
      console.log('form' + info.startStr + ' to ' + info.endStr)
    }
  }
}
</script>
 
<style lang="scss" scope>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
</style>

 

------------恢复内容结束------------