Angular FullCalendar is an event calendar based on the FullCalendar library.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {FullCalendarModule} from 'primeng/fullcalendar';
Getting Started
FullCalendar is a wrapper around on FullCalendar 4.1.0+ so FullCalendar core needs to be included in your project. For complete documentation and samples please refer to the FullCalendar website.
npm install @fullcalendar/core --save
Plugins
FullCalendar is plugin based so install the plugins you require and define them with the options property.
npm install @fullcalendar/daygrid --save
npm install @fullcalendar/timegrid --save
npm install @fullcalendar/interaction --save
Styles of the core and plugins required can be defined in angular.json or with CSS imports.
"styles": [
"node_modules/@fullcalendar/core/main.min.css",
"node_modules/@fullcalendar/daygrid/main.min.css",
"node_modules/@fullcalendar/timegrid/main.min.css",
//...
Event API
Events should be an array and defined using the events property. In this example, we'll be utilizing a service to load our data. See the documentation for more information about the Event API.
@Injectable()
export class EventService {
constructor(private http: Http) {}
getEvents() {
return this.http.get('showcase/resources/data/calendarevents.json')
.toPromise()
.then(res => <any[]> res.json().data)
.then(data => { return data; });
}
}
Sample events data as JSON.
{
"data": [
{
"id": 1,
"title": "All Day Event",
"start": "2017-02-01"
},
{
"id": 2,
"title": "Long Event",
"start": "2017-02-07",
"end": "2017-02-10"
},
{
"id": 3,
"title": "Repeating Event",
"start": "2017-02-09T16:00:00"
},
//...
Putting It Together
FullCalendar has a long list of customization parameters that are defined with the options property. Example below customizes the views, defaultDate and header.
<p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
export class FullCalendarDemo implements OnInit {
events: any[];
options: any;
constructor(private eventService: EventService) { }
ngOnInit() {
this.eventService.getEvents().then(events => {this.events = events;});
this.options = {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
defaultDate: '2017-02-01',
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
}
}
}
Change Detection
Updates to the events or options are reflected to the UI whenever a change occurs. An important note here is that UI update only happens whenever a new instance is created on these twp properties. Simply changing the events array without creating a new instance of the array or updating a property inside options will have no effect.
update() {
//incorrect
this.events.push({
"title": "Conference",
"start": "2016-01-11",
"end": "2016-01-13"
});
//correct
this.events = [...this.events, {
"title": "Conference",
"start": "2016-01-11",
"end": "2016-01-13"
}];
//incorrect
this.options.weekends = false;
//correct
this.options = {...this.options, weekends: false};
}
Callbacks
Callbacks of the FullCalendar are also defined with the options property.
this.options = {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dateClick: (e) => {
//handle date click
}
}
Methods
Methods of the underlying calendar instance is accessible using the reference of the components getCalendar() API.
<p-fullCalendar #fc [events]="events" [options]="options"></p-fullCalendar>
@ViewChild('fc') fc: FullCalendar;
gotoDate(date: Date) {
this.fc.getCalendar().gotoDate(date);
}
Theming
FullCalendar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG FullCalendar showcase for demos and documentation.
Discussion (0)