Hello Dev.
There are plenty of awesome jQuery libraries available on GitHub which are easy to integrate with pure jQuery projects. but after the release of high-level JavaScript frameworks like AngularJS, React and Vue.js it's far from time to time tough to use these libraries in its normal way. we will discover wrappers for those libraries on GitHub. however it is probably the case that those wrappers aren't usually updated with the latest functionalities of native jQuery library.
One such pure jQuery library is FullCalendar which helps management of events in unique perspectives of a calendar like Day, Week, Month and listing view.
This tutorial describes the step-by-step process of integrating FullCalendar in AngularJS-6+.
So let's start the lesson...
Step 1: Create AngularJS project
First of all we want to create a new AngularJS project the use of bellow command now open your terminal OR command prompt and then fire bellow command and run it:
ng new full-calendar-post
cd full-calendar-post
ng serve --open
Step 2: Install packages
Second you have to Install jQuery, moment.js and FullCalendar packages:
npm install jquery moment fullcalendar --save
npm install --save-dev @types/jquery
Step 3: Create component
In this step we have create a new component with name of full-calendar:
ng g c full-calendar
Step 4: Import full-calendar
In this step import full-calendar styles file in the angular.json file:
angular.json
...
...
"styles": [
"./node_modules/fullcalendar/dist/fullcalendar.min.css",
"src/styles.css"
],
...
...
Step 5: Modify component
In this step we have modify app.component.html to view full-calendar component:
app.component.html
<app-full-calendar></app-full-calendar>
Step 6: Import packages in component.ts
In this step we have to import jQuery, FullCalendar and moment.js packages in a component.ts file update the below code into your file:
make sure that you import these all of packages in below order only. otherwise, you might get the error in console.
full-calendar.component.ts
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import * as moment from 'moment';
import 'fullcalendar';
@Component({
selector: 'app-full-calendar',
templateUrl: './full-calendar.component.html',
styleUrls: ['./full-calendar.component.css']
})
export class FullCalendarComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
Step 7: Add element and configure object
Upload an element in a component.html file and configure the object to be passed in FullCalendar to have a few primary capability to start with.
full-calendar.component.html
<div id="full-calendar"></div>
full-calendar.component.ts
import { Component, OnInit, Input } from '@angular/core';
import * as $ from 'jquery';
import 'fullcalendar';
import * as moment from 'moment';
@Component({
selector: 'app-full-calendar',
templateUrl: './full-calendar.component.html',
styleUrls: ['./full-calendar.component.css']
})
export class FullCalendarComponent implements OnInit {
@Input()
set configurations(config: any) {
if(config) {
defaultConfigurations = config;
}
}
@Input() eventData: any;
defaultConfigurations: any;
constructor() {
this.defaultConfigurations = {
editable: true,
eventLimit: true,
titleFormat: 'MMM D YYYY',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day'
},
views: {
agenda: {
eventLimit: 2
}
},
allDaySlot: false,
slotDuration: moment.duration('00:15:00'),
slotLabelInterval: moment.duration('01:00:00'),
firstDay: 1,
selectable: true,
selectHelper: true,
events: this.eventData,
};
}
ngOnInit() { }
}
In above full-calendar.component.ts file:
1. configurations is an input property which overrides the default configurations object defaultConfigurations.
2. eventData is an input property which is an array of all events to be displayed on the calendar.
3. defaultConfigurations is an object which contains some basic properties already assigned with default values.
4. Notice the last property in defaultConfigurations object “events”, it is assigned as eventData value, that’s how we pass events to FullCalendar.
Step 8: Set default events
In this step we have set some prefix events data to view events on the calendar in full-calendar.component.ts file:
full-calendar.component.ts
constructor() {
this.eventData = [
{
title: 'event1',
start: moment()
},
{
title: 'event2',
start: moment(),
end: moment().add(2, 'days')
},
];
...
...
...
}
Step 9: Initialize FullCalendar
In this step we have initialize FullCalendar with defaultConfigurations object in full-calendar.component.ts file:
full-calendar.component.ts
...
...
ngOnInit() {
$('#full-calendar').fullCalendar(
this.defaultConfigurations
);
}
...
...
Finally that’s it. go to your browser and go to the URL localhost:4200. you'll see the calendar with three perspectives month, week and day, and there are two events.
If you could’t find the output on your browser, stop your local-server and restart it by means of ng serve again.
Till now we simply provide our events and configurations to the FullCalendar. however that’s no longer continually the case. We may additionally need to add a new event, drag an event from one day to another or perform some different operations.
So our next step is to catch callbacks which get emitted by FullCalendar and perform some operations (like making an API call to backend server to save new event or adjust the duration of the event).
Step 10: Catch FullCalendar callbacks
full-calendar.component.ts
constructor() {
this.defaultConfigurations = {
...
...
dayClick: (date, jsEvent, activeView) => {
this.dayClick(date, jsEvent, activeView);
},
eventDragStart: (timeSheetEntry, jsEvent, ui, activeView) => {
this.eventDragStart(
timeSheetEntry, jsEvent, ui, activeView\
);
},
eventDragStop: (timeSheetEntry, jsEvent, ui, activeView) => {
this.eventDragStop(
timeSheetEntry, jsEvent, ui, activeView
);
},
};
}
...
...
dayClick(date, jsEvent, activeView) {
console.log('day click');
}
eventDragStart(timeSheetEntry, jsEvent, ui, activeView) {
console.log('event drag start');
}
eventDragStop(timeSheetEntry, jsEvent, ui, activeView) {
console.log('event drag end');
}
...
...
In the above example, we catch three callbacks dayClick, eventDragStart, and eventDragStop in defaultConfigurations object and pass the callback arguments to component methods so that these methods can perform actions we want.
Right now, it just logs events in the console, but you can perform any operations you want.
Go to your browser, open browser console by pressing Ctrl + Shift + i. Now click on a day in the calendar and you will see ‘day click’ gets logged on browser console.
Same way try to drag an event from one day to another. When you start dragging and event, it logs ‘event drag start’ in the console and when you stop it, it logs ‘event drag end’.
You can find more configuration options and callbacks https://fullcalendar.io/docs at the docs of FullCalendar.
I hope it assists you, thanks for visiting my article if you like my article then share it with your friends on the social media platform.
Happy Coding.....
