1.7.0-beta2 • Published 6 years ago
ng-retro-fullcalendar v1.7.0-beta2
NOTE: This fork is compatible with FullCalendar 3.9.0. Once the main branch support it as well, this branch will be obsolete
Angular fullcalendar module
Jquery fullcalendar module FullCalendar
This package wraps the fullcalendar module for Angular.
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">
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>
Events binging
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;
});
}
Callbacks
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
resourceRender
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');
TODO
- Support of all events
- Add CustomButtons property
Thanks
- Aleksandr Sobakar (@xaosaki)
- Mario Mol (@mariohmol)
- (@vz28bh)
License
MIT
1.7.0-beta2
6 years ago
1.7.0-beta1
6 years ago