@fullcalendar/angular

esm
The official Angular component for FullCalendar
Version 6.1.17 License MIT
Keywords
calendareventfull-sizedfullcalendarangular
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 6.1.17
- 6.1.16
- 6.1.15
- 6.1.14
- 6.1.13
- 6.1.10
- 6.1.9
- 6.1.8
- 6.1.7
- 6.1.6
- 6.1.5
- 6.1.4
- 6.1.3
- 6.1.1
- 6.1.0
- 6.0.3
- 6.0.2
- 6.0.1
- 6.0.0
- 5.11.5
- 5.11.4
- 5.11.3
- 5.11.2
- 5.11.0
- 5.10.2
- 5.10.1
- 5.10.0
- 5.9.0
- 5.8.0
- 5.7.2
- 5.7.1
- 5.7.0
- 5.6.0
- 5.5.0
- 5.4.0
- 5.3.1
- 5.3.0
- 5.2.0
- 5.1.0
- 5.0.0
- 4.4.2
- 4.4.1
- 4.4.0
- 4.3.1
- 4.3.0
- 4.2.1
- 4.2.0
- 4.1.1
- 4.1.0
- 7.0.0-rc.0
- 7.0.0-beta.4
- 7.0.0-beta.3
- 7.0.0-beta.2
- 7.0.0-beta.1
- 7.0.0-beta.0
- 6.0.0-beta.4
- 6.0.0-beta.3
- 6.0.0-beta.2
- 5.0.0-rc
- 5.0.0-beta.4
- 5.0.0-beta.3
- 5.0.0-beta.2
- 5.0.0-beta.1
- 5.0.0-beta
- 4.4.5-beta
- 4.0.2-beta
<script type="module"> import fullcalendarangular from 'https://cdn.jsdelivr.net/npm/@fullcalendar/angular@6.1.17/+esm' </script>
FullCalendar Angular Component
The official Angular Component for FullCalendar
Installation
Install the Angular connector, the core package, and any plugins (like daygrid):
npm install @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid
Usage
First, connect FullCalendarModule
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]
})
export class AppModule { }
Then, use the full-calendar
component, supplying an options object:
import { Component } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
@Component({
selector: 'app-root',
templateUrl: `
<div>
<h1>Demo App</h1>
<full-calendar [options]="calendarOptions"></full-calendar>
</div>
`,
styleUrls: ['./app.component.scss']
})
export class AppComponent {
calendarOptions: CalendarOptions = {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth',
weekends: false,
events: [
{ title: 'Meeting', start: new Date() }
]
};
}
You can even supply nested templates:
<full-calendar [options]="calendarOptions">
<ng-template #eventContent let-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
Links
History
This project is built and maintained by irustm in partnership with the maintainers of FullCalendar. The project was originally called ng-fullcalendar
which can still be found on NPM.
Development
You must install this repo with PNPM:
pnpm install
Available scripts (via pnpm run <script>
):
build
- build production-ready dist fileswatch
- build & watch development dist filesstart
- run a simple example applicationtest
- test headlesslytest:dev
- test interactivelyclean