在Vue項目中用fullcalendar制作人員日歷


1、基本使用

 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>
<FullCalendar locale="zh-cn" />
  • 選項配置

參考鏈接:

https://segmentfault.com/a/1190000019962644
很多配置項有注釋
怎么在里面插入數據
FullCalendar日歷插件說明文檔


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM