在Vue項目中用fullcalendar制作日程表的示例代碼

更新時間：2019年08月04日 08:32:10 作者：來點靈感

這篇文章主要介紹了在Vue項目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

最近老牌日歷插件fullcalendar更新了v4版本，而且添加了Vue支持，所以用最新的fullcalendar v4制作一個完整日歷體驗一下，效果圖：

安裝

FullCalendar的功能被分解為“插件”。如果您需要它提供的功能，您只需要包含一個插件。

也就是說，F(xiàn)ullCalendar v4所有插件都得單獨安裝引用。

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid

引用并初始化

引用、注冊FullCalendar組件，得到一個月視圖的日歷。

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
 components: {
  FullCalendar
 },
 data() {
  return {
   calendarPlugins: [ dayGridPlugin ]
  }
 }
}

</script>

<template>
 <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
</template>

<style lang='less'>
  //用什么插件必須引入相應的樣式表，否則不能正常顯示
  @import '~@fullcalendar/core/main.css';
  @import '~@fullcalendar/daygrid/main.css';
</style>

功能定制

為了完成復雜功能，需要引用更多插件，插件列表：

https://fullcalendar.io/docs/plugin-index

語言設置簡體中文

  <FullCalendar locale="zh-cn" />

如果表頭加了button的話，button文字要單獨做處理，給每個button的英文名稱加一個中文的映射，例：

  <FullCalendar
   :header="{
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
   }"
   :buttonText="buttonText" 
   />

 data () {
  return {
   buttonText: {
    today: '今天',
    month: '月',
    week: '周',
    day: '天'
   }
  }
 }

點擊日歷添加事件

想要觸發(fā)dateClick事件必須先安裝引用interaction插件，文檔鏈接：https://fullcalendar.io/docs/dateClick

npm install --save @fullcalendar/interaction

  <FullCalendar @dateClick="handleDateClick" />

  handleDateClick (arg) {
   if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
    this.calendarEvents.push({ // add new event data
     title: 'New Event',
     start: arg.date,
     allDay: arg.allDay
    })
   }
  }

點擊事件查看詳情

<FullCalendar @eventClick="handleEventClick" />

  handleEventClick (info) {
   alert('Event: ' + info.event.title)
  }

完整例子在我的github項目里，項目地址：https://github.com/Inspiration1/asteroid

官方文檔：

https://fullcalendar.io/docs/vue

https://fullcalendar.io/docs#toc

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue中使用scrollTo無效的解決方法
本文主要介紹了vue中使用scrollTo無效的解決方法，想要使用scrollTo使當前網(wǎng)頁滾動到指定位置，本文就來解決一下，具有一定的參考價值，感興趣的可以了解一下
2023-08-08
vue3使用vueup/vue-quill富文本、并限制輸入字數(shù)的方法處理
這篇文章主要介紹了vue3使用vueup/vue-quill富文本、并限制輸入字數(shù),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-03-03
在vue中實現(xiàn)點擊選擇框阻止彈出層消失的方法
今天小編就為大家分享一篇在vue中實現(xiàn)點擊選擇框阻止彈出層消失的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue3.0寫自定義指令的簡單步驟記錄
Vue中除了內(nèi)置指令,也允許注冊自定義的指令,下面這篇文章主要給大家介紹了關于Vue3.0寫自定義指令的相關資料,需要的朋友可以參考下
2021-06-06
Vue.js系列之項目搭建(1)
今天要講講Vue2.0了。最近將公司App3.0用vue2.0構(gòu)建了一個web版，因為是第一次使用vue，而且一開始使用的時候2.0出來一個月不到，很多坑都是自己去踩的，現(xiàn)在項目要上線了，所以記錄一些過程
2017-01-01
Vue中的組件注冊方法及注意事項
在Vue中，組件是構(gòu)建頁面的基本單位。通過組件化開發(fā)，可以提高代碼的復用性和可維護性。組件的注冊方法包括全局注冊和局部注冊兩種方式。同時，需要注意組件名的命名規(guī)范、組件選項的定義方式、組件之間的通信等問題，以實現(xiàn)更好的組件復用和開發(fā)效率
2023-05-05
vue ssr+koa2構(gòu)建服務端渲染的示例代碼
這篇文章主要介紹了vue ssr+koa2構(gòu)建服務端渲染的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
詳解Vue3子組件向父組件傳遞消息
這篇文章主要介紹了Vue3子組件向父組件傳遞消息,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
使用vue自定義如何實現(xiàn)Tree組件和拖拽功能
這篇文章主要介紹了使用vue自定義如何實現(xiàn)Tree組件和拖拽功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue table直接定位到指定元素的操作代碼
最近遇到這樣的需求點擊某一個節(jié)點，彈窗，直接定位到點擊的節(jié)點，高亮并顯示數(shù)據(jù)，下面小編給大家?guī)砹藇ue table直接定位到指定元素的操作代碼,需要的朋友可以參考下
2022-11-11