Angular fullcalendar module
Jquery fullcalendar module FullCalendar
This package fullcalendar module for Angular 2, 4
Demo project in Stackblitz DEMO
Demo src Demo
Getting started
Install via npm :
npm install ng-fullcalendar
npm install fullcalendar@3.6.1
Then include the FullCalendarModule
module in your module.
import { FullCalendarModule } from 'ng-fullcalendar';
@NgModule({
imports: [
BrowserModule,
FullCalendarModule,
...
]
...
})
export class AppModule {}
For index.html style urls
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css">
Import CalendarComponent in your component :
import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
@Component({
selector: 'demo-app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
calendarOptions: Options;
@ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
constructor() {}
ngOnInit() {
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: data
};
}
}
then your app.component.html
<div *ngIf="calendarOptions">
<ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
(eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
</div>
Callbacks
Output 7 EventEmitters
clickButton
eventClick
eventDrop
eventResize
windowResize
viewRender
viewDestroy
eventRender
API
More api docs: Official fullcalendar docs
Example render new event
let el = {
title: 'New event'
start: '2017-10-07',
end: '2017-10-10',
...
}
this.ucCalendar.fullCalendar('renderEvent', el);
this.ucCalendar.fullCalendar('rerenderEvents');
License
MIT