FullCalendar Vue 3 组件
全算盘 用于渲染日历的 Vue 软件包
安装
npm install @fullcalendar/vue3 temporal-polyfill
来自v6?
在 v7 中, dayGrid 和 TimeGrid 等插件是此套件的一部分, 从子路径导入 @fullcalendar/vue3/daygrid单独的 @fullcalendar/core, (中文(简体) ), @fullcalendar/daygrid, (中文(简体) ), @fullcalendar/interaction (etc.)包为FullCalendar v6. 不要用 v7 安装它们, 不要降级到 v6 : 解开它们并从中导入插件 @fullcalendar/vue3/daygrid见 升级指南。 。 。 .
使用量
显示 a FullCalendar 组件 选项,包括一个或多个插件:
<script>
import FullCalendar from '@fullcalendar/vue3'
import classicThemePlugin from '@fullcalendar/vue3/themes/classic'
import dayGridPlugin from '@fullcalendar/vue3/daygrid'
import '@fullcalendar/vue3/skeleton.css'
import '@fullcalendar/vue3/themes/classic/theme.css'
import '@fullcalendar/vue3/themes/classic/palette.css'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data: function() {
return {
calendarOptions: {
plugins: [classicThemePlugin, dayGridPlugin],
initialView: 'dayGridMonth',
weekends: false,
events: [
{ title: 'Meeting', start: new Date() }
]
}
}
}
}
</script>
<template>
<h1>Demo App</h1>
<FullCalendar :options='calendarOptions' />
</template>
你甚至可以提供 命名位置( s) 模板 :
<template>
<h1>Demo App</h1>
<FullCalendar :options='calendarOptions'>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</template>
插件
| 导入 | 提供 |
|---|---|
@fullcalendar/vue3/daygrid | dayGridDay编号 :Week编号 :Month编号 :Year 视图 |
@fullcalendar/vue3/timegrid | timeGridDay编号 :Week 视图 |
@fullcalendar/vue3/list | listDay编号 :Week编号 :Month编号 :Year 视图 |
@fullcalendar/vue3/multimonth | multiMonthYear 视图 |
@fullcalendar/vue3/interaction | 拖曳、调整大小和日期/活动选择 |
主题也是插件 . @fullcalendar/vue3/themes/classic, (中文(简体) ), /monarch, (中文(简体) ), /breezy, (中文(简体) ), /forma,以及 /pulse 可用,每个配对 theme.css 和调色板样式表.