FullCalendar 角组件
用于渲染日历的 FullCalendar Angular 软件包
安装
npm install @fullcalendar/angular fullcalendar temporal-polyfill
来自v6?
在 v7 中, dayGrid 和 TimeGrid 等插件是此套件的一部分, 从子路径导入 @fullcalendar/angular/daygrid单独的 @fullcalendar/core, (中文(简体) ), @fullcalendar/daygrid, (中文(简体) ), @fullcalendar/interaction (etc.)包为FullCalendar v6. 不要用 v7 安装它们, 不要降级到 v6 : 解开它们并从中导入插件 @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 dayGridPlugin from "@fullcalendar/angular/daygrid";
@Component({
selector: "app-root",
standalone: true,
imports: [CommonModule, RouterOutlet, FullCalendarModule],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
calendarOptions: CalendarOptions = {
initialView: "dayGridMonth",
plugins: [themePlugin, dayGridPlugin],
};
}
然后,将以下样式表添加到您的 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>
您甚至可以提供嵌入模板 :
<full-calendar [options]="calendarOptions">
<ng-template #eventContent let-arg>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</ng-template>
</full-calendar>
插件
| 导入 | 提供 |
|---|---|
@fullcalendar/angular/daygrid | dayGridDay编号 :Week编号 :Month编号 :Year 视图 |
@fullcalendar/angular/timegrid | timeGridDay编号 :Week 视图 |
@fullcalendar/angular/list | listDay编号 :Week编号 :Month编号 :Year 视图 |
@fullcalendar/angular/multimonth | multiMonthYear 视图 |
@fullcalendar/angular/interaction | 拖曳、调整大小和日期/活动选择 |
主题也是插件 . @fullcalendar/angular/themes/classic, (中文(简体) ), /monarch, (中文(简体) ), /breezy, (中文(简体) ), /forma,以及 /pulse 可用,每个配对 theme.css 和调色板样式表.
链接
历史
该项目由下列人员建造和维护: 错误 与FullCalendar的维护者合作。 这个项目最初叫做 ng-fullcalendar 还能是 在国家预防机制上发现。 。 。 .