Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 444 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
.vscode		.vscode
app		app
lib		lib
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmrc		.npmrc
CHANGELOG.md		CHANGELOG.md
LICENSE.txt		LICENSE.txt
README.md		README.md
angular.json		angular.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json

Repository files navigation

FullCalendar Angular Component

The officialAngular Component forFullCalendar

Installation

Install the Angular connector, the core package, and any plugins (likedaygrid):

npm install @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid

Usage

First, connectFullCalendarModule to your app module:

import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{FullCalendarModule}from'@fullcalendar/angular';import{AppComponent}from'./app.component';@NgModule({declarations:[AppComponent],imports:[BrowserModule,FullCalendarModule// register FullCalendar with your app],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}

Then, use thefull-calendar component, supplying anoptions object:

import{Component}from'@angular/core';import{CalendarOptions}from'@fullcalendar/core';importdayGridPluginfrom'@fullcalendar/daygrid';@Component({selector:'app-root',templateUrl:`    <div>      <h1>Demo App</h1>      <full-calendar [options]="calendarOptions"></full-calendar>    </div>  `,styleUrls:['./app.component.scss']})exportclassAppComponent{calendarOptions:CalendarOptions={plugins:[dayGridPlugin],initialView:'dayGridMonth',weekends:false,events:[{title:'Meeting',start:newDate()}]};}

You can even supply nested templates:

<full-calendar[options]="calendarOptions"><ng-template#eventContentlet-arg><b>{{arg.timeText}}</b><i>{{arg.event.title}}</i></ng-template></full-calendar>

Supported Angular Versions

@fullcalendar/angular version 6 supports Angular 12 - 18

History

This project is built and maintained byirustm in partnership with the maintainers of FullCalendar. The project was originally calledng-fullcalendar which can still befound on NPM.