Vue 項目中如何使用fullcalendar 時間段選擇插件(類似課程表格)

更新時間：2024年07月06日 10:23:06 作者：xiaopengyaonixi

最近完成一個項目,需要選擇一個會議室,但是最好能夠通過在圖上顯示出該會議室在某某時間段內已經被預定了,初看這個功能感覺很棘手,仔細分析下實現(xiàn)起來還是挺容易的,下面通過示例代碼講解Vue項目中使用fullcalendar時間段選擇插件,感興趣的朋友一起看看吧

最近完成一個項目，有這樣的需求，我們需要選擇一個會議室，但是最好能夠通過在圖上顯示出該會議室在某某時間段內已經被預定了。

先看一下這個功能最終實現(xiàn)的效果，看一看是不是你想要的效果，是您需要的請繼續(xù)讀下去，如果不是請忽略本文。

本文中是基于VUE+elementui項目中實現(xiàn)的前后端分離的前端功能部分：

所使用的插件：https://github.com/fullcalendar/fullcalendar這個項目功能很豐富

插件的官方文檔：https://fullcalendar.io/

vue版本的官方文檔：https://fullcalendar.io/docs/vue

實現(xiàn)本功能需要注意（基本的業(yè)務邏輯）：

1.過去的時間不能選擇；

2.已經選擇過的時間范圍內不能再次選擇；

下面你需要在你的項目中安裝如下的插件: 命令行npm install xxxxx:

npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/moment @fullcalendar/interaction

最后貼上我的最終的代碼：

<template>
  <div class="container" style="width:60%; margin: 0 auto;">
    <FullCalendar
      :plugins="calendarPlugins"
      :all-day-slot="false"
      :header="{
        left:'prev',
        center:'title',
        right: 'today ,next'
      }"
      :slot-event-overlap="false"
      :events="[
        {
          title: '計算機學院小組會議',
          start: '2019-05-15 10:00:00',
          end: '2019-05-15 16:00:00',
          color:'orange'
        },
        {
          start: '2019-05-14 10:00:00',
          end: '2019-05-14 14:00:00',
          title: '東南大學計算機學術會議',
          color:'green'
        }
      ]"
      :button-text="{
        today: '今天'
      }"
      :unselect-auto="false"
      :select-overlap="false"
      :business-hours="{
        startTime: '07:00',
        endTime:'18:00',
        daysOfWeek: [ 1, 2, 3, 4, 5, 6, 0 ]
      }"
      :select-allow="handlerSeelctAllow"
      select-mirror="true"
      min-time="07:00:00"
      max-time="23:00:00"
      selectable="true"
      slot-duration="00:30"
      slot-label-format="HH:mm"
      title-format="YYYY年MM月D日"
      default-view="timeGridWeek"
      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'
export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlulgin, momentPlugin, interactionPlugin],
      // 隨時判斷時間是否合法，通過返回true/false來判斷是否能夠選擇
      handlerSeelctAllow: info => {
        const currentDate = new Date()
        const start = info.start
        const end = info.end
        return (start <= end && start >= currentDate)
      }
    }
  },
  methods: {
    // 當點擊時候
    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>

以上就是fullcalendar基本的操作了，如果您還需要一些其他的功能，請查閱相關文檔繼續(xù)學習。

后記：用代碼來實現(xiàn)自己的想法是快樂的，這種成就感是金錢買不到的，這就是我繼續(xù)前行的動力。因為熱愛，所以再多的付出也都是值得的，當軟件運行成功的一刻，我想我是這個世界上最幸福的人。

這篇文章重在自我學習和探討，當不借助外力或者拿來主義的思路去解決問題時，或許就是我們技術加速前進的開始。

到此這篇關于Vue 項目中使用fullcalendar 時間段選擇插件（類似課程表格）的文章就介紹到這了,更多相關Vue使用fullcalendar插件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: