快捷導(dǎo)航

vue下使用fullcalendar案例講解

更新時間：2024年01月17日 11:32:10 作者：林深時見鹿7

這篇文章主要介紹了vue下使用fullcalendar及簡單案例,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

ps：我真的感覺自己是個前端了，最近天天在寫前端。不過很多復(fù)雜邏輯，后臺處理起來比較麻煩，所以只讓后臺提供簡單數(shù)據(jù)，前端封裝處理數(shù)據(jù)確實(shí)比較方便！
引子：最近公司要做個人日程管理，故鄙人思前想后，選擇了fullcalendar組件。但！官方文檔全是英文，對于英語四級都沒過的我，真是很心累。只能發(fā)揚(yáng)面向百度編程的優(yōu)良傳統(tǒng)，找了好多案例做出來了?，F(xiàn)總結(jié)如下：

vue下使用fullcalendar及簡單案例

使用版本：5.3.0
效果圖

安裝

在package.json中引入如下，運(yùn)行“npm i”

    "@fullcalendar/daygrid": "^5.3.0",
    "@fullcalendar/interaction": "^5.3.0",
    "@fullcalendar/list": "^5.3.0",
    "@fullcalendar/timegrid": "^5.3.0",
    "@fullcalendar/vue": "^5.3.0",

或者直接 “npm install -save *****”
運(yùn)行報錯，多半是因?yàn)閬y七八糟的依賴版本沖突，要更換依賴版本。對了！安裝前請把npm改成阿里云依賴下載，否則卡死。
安裝成功的話，在package-lock.json中會有一條記錄：

無需再main.js中引入

使用

基本使用

創(chuàng)建vue文件，在script中引入fullcalendar（哪個頁面用哪里引）

<template>
   <FullCalendar ref="fullCalendar"></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
  //import引入的組件需要注入到對象中才能使用
  components: { FullCalendar }  
}
</script>

此時可以顯示一個簡單的日歷了，但遠(yuǎn)遠(yuǎn)不是我們想要的。

注入事件和屬性

代碼：

<template>
   <FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
  //import引入的組件需要注入到對象中才能使用
  components: { FullCalendar }  
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
        initialView: 'dayGridMonth',
        locale: 'zh',
        firstDay: 1,
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日',
          list: '周列表',
        },
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay listWeek',
        },
        height: 650,
        validRange: this.validRange,  //設(shè)置可顯示的總?cè)掌诜秶?
        events: [], //背景色 (添加相同時間的背景色時顏色會重疊) 
        datesSet: this.datesSet, //日期渲染；修改日期范圍后觸發(fā)
        eventClick: this.handleEventClick, //點(diǎn)擊日程觸發(fā)
        dateClick: this.handleDateClick, //點(diǎn)擊日期觸發(fā)
        eventDrop: this.calendarEventDropOrResize, //拖動事件觸發(fā)
        eventResize: this.calendarEventDropOrResize, //縮放事件觸發(fā)
        displayEventTime: false, //不顯示具體時間
      },
      validRange: {
        start: '2021-09-01',
        end: moment().add(6, 'months').format('YYYY-MM-DD'),
      }
    }
  },
   methods: {
    datesSet(info) {   //注意：該方法在頁面初始化時就會觸發(fā)一次
        console.log(info)
        // this.search()  //請求本頁數(shù)據(jù)
        //虛擬數(shù)據(jù)
        this.calendarOptions.events = [{
              id: 111,
              title: '任務(wù)1',
              start: ‘2021-10-01',
              end: ‘2021-10-11'
              color: ‘#ffcc99',
              editable: true, //允許拖動縮放，不寫默認(rèn)就是false
              overlap: true, //允許時間重疊，即可以與其他事件并存，不寫默認(rèn)就是false
          },{
			id: 222,
              title: '任務(wù)2',
              start: ‘2021-10-12',
              end: ‘2021-10-20'
              color: ‘#ffcc99',
              editable: true, //允許拖動縮放
		}] 
      },
    handleEventClick(info) {},
    handleDateClick(info){},
    calendarEventDropOrResize(info){}
  }
}
</script>

參數(shù)說明：