快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

2.已經(jīng)選擇過的時間范圍內(nèi)不能再次選擇；

下面你需要在你的項目中安裝如下的插件: 命令行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: '計算機學(xué)院小組會議',
          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: '東南大學(xué)計算機學(xué)術(shù)會議',
          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: {
    // 當(dāng)點擊時候
    handleDateClick(arg) {
      console.log(arg)
    },
    // 當(dāng)選擇結(jié)束的時候獲取開始和結(jié)束時間
    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基本的操作了，如果您還需要一些其他的功能，請查閱相關(guān)文檔繼續(xù)學(xué)習(xí)。

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

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

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

您可能感興趣的文章: