Jquery fullcalendar module FullCalendar
This package wraps the fullcalendar module for Angular.
Demo project in Stackblitz DEMO
Demo src Demo
This package support Angular 6, see please demo src.
- Upgrate this package to fullcalendar version 4! Stop Jquery!
Install via npm :
npm install ng-fullcalendar
npm install [email protected]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">Or you can add this in your SCSS pipe
@import "~/fullcalendar/dist/fullcalendar.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>From 1.5.0 version new feature [(eventsModel)]="events" two events binding
<div *ngIf="calendarOptions">
<ng-fullcalendar #ucCalendar [options]="calendarOptions" [(eventsModel)]="events"></ng-fullcalendar>
</div>ngOnInit() {
this.eventService.getEvents().subscribe(data => {
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
selectable: true,
events: [],
};
});
}
clearEvents() {
this.events = [];
}
loadEvents() {
this.eventService.getEvents().subscribe(data => {
this.events = data;
});
}Output 27 EventEmitters
eventDrop
eventResize
eventResizeStart
eventResizeStop
eventClick
clickButton
windowResize
viewRender
eventAfterRender
eventAfterAllRender
viewDestroy
eventRender
eventDestroy
eventMouseOver
eventMouseOut
initialized
select
unselect
dayClick
navLinkDayClick
navLinkWeekClick
eventDragStart
eventDragStop
drop
eventReceive
dayRender
resourceRenderMore 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');- Aleksandr Sobakar (@xaosaki)
- Mario Mol (@mariohmol)
- (@vz28bh)
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent