FullCalendar Angular Scheduler

FullCalendar Angular Scheduler package, for rendering resource views

Installation

npm install \
  @fullcalendar/angular \
  @fullcalendar/angular-scheduler \
  fullcalendar \
  fullcalendar-scheduler \
  temporal-polyfill

Coming from v6?

In v7, the premium plugins are part of this package, imported from subpaths like @fullcalendar/angular-scheduler/resource-timeline, and the standard plugins come from @fullcalendar/angular (e.g. @fullcalendar/angular/daygrid). The separate @fullcalendar/resource, @fullcalendar/resource-timeline, @fullcalendar/timeline, @fullcalendar/core, @fullcalendar/daygrid (etc.) packages are FullCalendar v6. Don't install them with v7, and don't downgrade to v6: uninstall them and import plugins from @fullcalendar/angular-scheduler/resource-timeline and @fullcalendar/angular/daygrid. See the upgrade guide.

Usage

In one of your app's component files:

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" },
    ],
  };
}

Then, add the following stylesheets to your 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"
              ]

Then, in your component's template file, you have access to the <full-calendar> tag. You must pass your options into this declaration!

<full-calendar [options]="calendarOptions"></full-calendar>

Plugins

Links

• Angular Documentation
• Angular Scheduler Documentation
• Angular Scheduler Example Project
• Options Reference