eventosa
v6.0.7
Published
The official Angular component for FullCalendar
Downloads
15
Maintainers
Readme
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 - 15
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