FullCalendar 角排程器
FullCalendar Angular 调度包,用于渲染资源视图
安装
npm install \
@fullcalendar/angular \
@fullcalendar/angular-scheduler \
fullcalendar \
fullcalendar-scheduler \
temporal-polyfill
来自v6?
在v7中,溢价插件是本套件的一部分,从子路径导入,例如 @fullcalendar/angular-scheduler/resource-timeline,而标准插件来自 @fullcalendar/angular (例如:. @fullcalendar/angular/daygrid) (中文(简体) ). 分开 @fullcalendar/resource, (中文(简体) ), @fullcalendar/resource-timeline, (中文(简体) ), @fullcalendar/timeline, (中文(简体) ), @fullcalendar/core, (中文(简体) ), @fullcalendar/daygrid (etc.)包为FullCalendar v6. 不要用 v7 安装它们, 不要降级到 v6 : 解开它们并从中导入插件 @fullcalendar/angular-scheduler/resource-timeline 财务报告和审定财务报表 @fullcalendar/angular/daygrid见 升级指南。 。 。 .
使用量
在您的应用程序组件文件中 :
import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterOutlet } from "@angular/router";
import { FullCalendarModule, CalendarOptions } from "@fullcalendar/angular";
import themePlugin from "@fullcalendar/angular/themes/monarch"; // YOUR THEME
import interactionPlugin from "@fullcalendar/angular/interaction";
import resourceTimelinePlugin from "@fullcalendar/angular-scheduler/resource-timeline";
@Component({
selector: "app-root",
standalone: true,
imports: [CommonModule, RouterOutlet, FullCalendarModule],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
calendarOptions: CalendarOptions = {
plugins: [themePlugin, interactionPlugin, resourceTimelinePlugin],
initialView: "resourceTimelineWeek",
schedulerLicenseKey: "YOUR-LICENSE-KEY",
editable: true,
events: [
{ id: "1", resourceId: "a", title: "Meeting", start: new Date() },
],
resources: [
{ id: "a", title: "Resource A" },
{ id: "b", title: "Resource B" },
],
};
}
然后,将以下样式表添加到您的 angular.json数字 :
{
"projects": { // ...
"my-project": { // ...
"architect": { // ...
"build": { // ...
"options": { // ...
"styles": [
+ "@fullcalendar/angular/skeleton.css", // ALWAYS NEED SKELETON
+ "@fullcalendar/angular/themes/monarch/theme.css", // YOUR THEME
+ "@fullcalendar/angular/themes/monarch/palettes/purple.css", // YOUR THEME'S PALETTE
"src/styles.css"
]
然后,在您的组件模板文件中,您可以访问 <full-calendar> 标签。 你必须把选择权传到这个宣言中!
<full-calendar [options]="calendarOptions"></full-calendar>
插件
| 导入 | 提供 |
|---|---|
@fullcalendar/angular-scheduler/resource-timeline | resourceTimelineDay编号 :Week编号 :Month编号 :Year 视图 |
@fullcalendar/angular-scheduler/resource-timegrid | resourceTimeGridDay编号 :Week 视图 |
@fullcalendar/angular-scheduler/resource-daygrid | resourceDayGridDay编号 :Week编号 :Month 视图 |
@fullcalendar/angular-scheduler/timeline | timelineDay编号 :Week编号 :Month编号 :Year 视图(无资源) |
@fullcalendar/angular-scheduler/scrollgrid | 大型网格的增强滚动功能 |
@fullcalendar/angular-scheduler/adaptive | 打印优化渲染 |