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日歷插件說明文檔