FullCalendar 网络组件
全算盘 网络组件 用于渲染日历的软件包
安装
npm install @fullcalendar/web-component temporal-polyfill
来自v6?
在 v7 中, dayGrid 和 TimeGrid 等插件是此套件的一部分, 从子路径导入 @fullcalendar/web-component/daygrid单独的 @fullcalendar/core, (中文(简体) ), @fullcalendar/daygrid, (中文(简体) ), @fullcalendar/interaction (etc.)包为FullCalendar v6. 不要用 v7 安装它们, 不要降级到 v6 : 解开它们并从中导入插件 @fullcalendar/web-component/daygrid见 升级指南。 。 。 .
使用量
显示 a FullCalendar 组件 选项,包括一个或多个插件:
// globally installs the <full-calendar> tag
import '@fullcalendar/web-component/global'
// plugins
import themePlugin from '@fullcalendar/web-component/themes/monarch' // YOUR THEME
import dayGridPlugin from '@fullcalendar/web-component/daygrid'
// stylesheets
import '@fullcalendar/web-component/skeleton.styles' // ALWAYS NEED SKELETON
import '@fullcalendar/web-component/themes/monarch/theme.styles' // YOUR THEME
import '@fullcalendar/web-component/themes/monarch/palettes/purple.css' // YOUR THEME'S PALETTE
// initialize with options and plugins
const fullCalendarElement = document.querySelector('full-calendar')
fullCalendarElement.options = {
plugins: [themePlugin, dayGridPlugin],
initialView: 'dayGridMonth',
weekends: false,
events: [
{ title: 'Meeting', start: new Date() }
]
}
请注意:, skeleton.styles 财务报告和审定财务报表 theme.styles 是的,他们确实注射了CSS。 这是网络组件的影子DOM所需要的.
然后,在您的 HTML 中:
<full-calendar></full-calendar>
插件
| 导入 | 提供 |
|---|---|
@fullcalendar/web-component/daygrid | dayGridDay编号 :Week编号 :Month编号 :Year 视图 |
@fullcalendar/web-component/timegrid | timeGridDay编号 :Week 视图 |
@fullcalendar/web-component/list | listDay编号 :Week编号 :Month编号 :Year 视图 |
@fullcalendar/web-component/multimonth | multiMonthYear 视图 |
@fullcalendar/web-component/interaction | 拖曳、调整大小和日期/活动选择 |
主题也是插件 . @fullcalendar/web-component/themes/classic, (中文(简体) ), /monarch, (中文(简体) ), /breezy, (中文(简体) ), /forma,以及 /pulse 可用,每个配对 theme.styles 模块和一个调色板样式表.