How To Create Calendar In Angular

Introduction

In this article, I will explain how to create and implement FullCalendar using Angular. And also, I will discuss some fundamentals of it.

Prerequisites

Angular 7
HTML/Bootstrap

For this article, I have created an Angular project using Angular 8. For creating an Angular project, we need to follow the following steps:

Step 1

I have created a project using the following command in the Command Prompt.

ng new fullcalendarexample

Step 2

Open a project in Visual Studio Code using the following commands.

cd fullcalendarexample
code .

Step 3

The next step is to install the Full Calendar-related dependencies using the following commands.

npm install --save @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid

Step 4

The next step is to check the following dependencies in package.json.

"@fullcalendar/angular": "^4.4.5-beta",
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/interaction": "^4.0.1",

package.json

{
"name": "@coreui/coreui-free-angular-admin-template",
"version": "2.0.1",
"description": "CoreUI Free Angular 2+ Admin Template",
"author": {
"name": "Łukasz Holeczek",
"url": "http://holeczek.pl",
"github": "https://github.com/mrholek",
"twitter": "https://twitter.com/lukaszholeczek"
},
"contributors": [
{
"name": "Andrzej Kopański",
"url": "https://github.com/xidedix"
}
],
"homepage": "https://coreui.io/angular",
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.10",
"@angular/cdk": "^7.3.2",
"@angular/common": "^6.1.10",
"@angular/compiler": "^6.1.10",
"@angular/core": "^6.1.10",
"@angular/forms": "^6.1.10",
"@angular/http": "^6.1.10",
"@angular/material": "^7.3.2",
"@angular/platform-browser": "^6.1.10",
"@angular/platform-browser-dynamic": "^6.1.10",
"@angular/router": "^6.1.10",
"@coreui/angular": "^2.0.0-rc.1",
"@coreui/coreui": "^2.0.20",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/icons": "0.3.0",
"@fullcalendar/angular": "^4.4.5-beta",
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/interaction": "^4.0.1",
"@nebular/theme": "3.1.0",
"@syncfusion/ej2-angular-calendars": "^16.4.52",
"bootstrap": "^4.1.3",
"chart.js": "^2.7.3",
"core-js": "^2.5.7",
"flag-icon-css": "^3.2.1",
"font-awesome": "^4.7.0",
"html2canvas": "^1.0.0-alpha.12",
"jspdf": "^1.5.3",
"moment": "^2.22.2",
"mutationobserver-shim": "^0.3.2",
"ng2-charts": "^1.6.0",
"ng2-file-upload": "^1.3.0",
"ng2-search-filter": "^0.4.7",
"ng2-slim-loading-bar": "^4.0.0",
"ngx-bootstrap": "^3.0.1",
"ngx-pagination": "^3.2.1",
"ngx-perfect-scrollbar": "^6.3.1",
"ngx-slick-carousel": "^0.4.4",
"ngx-toastr": "^9.1.1",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"simple-line-icons": "^2.4.1",
"slick-carousel": "^1.8.1",
"ts-helpers": "^1.1.2",
"tsickle": "^0.33.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.7.5",
"@angular/cli": "^7.3.9",
"@angular/compiler-cli": "^6.1.10",
"@angular/language-service": "^6.1.10",
"@types/jasmine": "^2.8.9",
"@types/jasminewd2": "^2.0.5",
"@types/node": "^10.12.0",
"codelyzer": "^4.5.0",
"jasmine-core": "^3.2.1",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.3.1",
"protractor": "^5.4.1",
"ts-node": "^7.0.1",
"tslint": "^5.11.0",
"typescript": "^2.9.2"
},
"engines": {
"node": ">= 8.9.4",
"npm": ">= 5.6.0"
}
}

Step 5

Now manually include the stylesheets for FullCalendar’s core and plugins in style.css,

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';

You must then include the FullCalendarModule into your app’s root module.

import { FullCalendarModule } from '@fullcalendar/angular'; // for FullCalendar!

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular'; // for FullCalendar!
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FullCalendarModule // for FullCalendar!
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { FullCalendarComponent } from '@fullcalendar/angular';
import { EventInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('calendar',null) calendarComponent: FullCalendarComponent; // the #calendar in the template
options: any;
eventsModel: any[] = [];
calendarVisible = true;
calendarWeekends = true;
calendarEvents: EventInput[] = [
{ title: 'Event Now', start: new Date() }
];
toggleVisible() {
this.calendarVisible = !this.calendarVisible;
}
ngOnInit() {
this.options = {
editable: false,
disableDragging: false,
selectable: true,
theme: 'standart',
header: {
right: 'prev,next, today',
left: '',
},
validRange: {
start: '2017-05-01',
end: '2019-06-01'
},
plugins: [dayGridPlugin]
};
this.calendarEvents = [{
title: 'Updaten Event',
start: '2020-08',
end: '2020-10'
}];
}
toggleWeekends() {
this.calendarWeekends = !this.calendarWeekends;
}
eventClick(model) {
}
dateClick(model) {
}
eventDragStop(model) {
}
gotoPast() {
let calendarApi = this.calendarComponent.getApi();
calendarApi.gotoDate('2000-01-01'); // call a method on the Calendar object
}
handleDateClick(arg) {
if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
this.calendarEvents = this.calendarEvents.concat({ // add new event data. must create new array
title: 'New Event',
start: arg.date,
allDay: arg.allDay
})
}
}
}

app.component.html

<div class='app'>
<div class='app-top'>
<button (click)='toggleVisible()'>toggle visible</button>
<button (click)='toggleWeekends()'>toggle weekends</button>
<button (click)='gotoPast()'>go to a date in the past</button>
(also, click a date/time to add an event)
</div>
<full-calendar #fullcalendar [editable]="true" [events]="calendarEvents"
[header]="options.header" [customButtons]="options.customButtons"
(dateClick)="dateClick($event)" (eventDragStop)="eventDragStop($event)"
[plugins]="options.plugins" (eventClick)="eventClick($event)"
[columnHeaderHtml]="options.columnHeaderHtml"></full-calendar>
</div>

Now, run the project using the following command,

ng serve

Summary

In this article, I have discussed how to create FullCalendar in Angular.

Reference

https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/angular/src

DEMO