Welcome folks today in this blog post we will be showing calendar
in browser using angular 14
and full calendar
library in typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new angularproject
cd angularproject
Now we need to install the below libraries using the npm
command as shown below
npm i fullcalendar
After this you need to edit the app.module.ts
file and copy paste the following code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FullCalendarModule } from '@fullcalendar/angular'; import interactionPlugin from '@fullcalendar/interaction'; import dayGridPlugin from '@fullcalendar/daygrid'; FullCalendarModule.registerPlugins([ interactionPlugin, dayGridPlugin ]); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FullCalendarModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
As you can see we are including the full calendar
module and adding it inside the imports array and then we are also importing the full calendar plugins as well.
Now we need to edit the app.component.html
file and copy paste the following code
app.component.html
1 2 3 |
<div class="container"> <full-calendar [options]="calendarOptions"></full-calendar> </div> |
As you can see we are rendering
the full calendar component and inside it we are attaching the options
object. And now we need to edit the app.component.ts
file and copy paste the following code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { Component } from '@angular/core'; import { CalendarOptions } from '@fullcalendar/angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { Events = []; calendarOptions!: CalendarOptions; constructor() { } onDateClick(res: { dateStr: string; }) { alert('You clicked on : ' + res.dateStr) } ngOnInit() { setTimeout(() => { this.calendarOptions = { initialView: 'dayGridMonth', dateClick: this.onDateClick.bind(this), events: this.Events }; }, 3500); } } |
As you can see we are attaching the full calendar
inside the ngOnInit()
method and here we are using the setTimeout()
method to show the calendar after 3.5 seconds. And also we have binded the onclick
listener to the calendar component. If we click the date then it will tell the date that the user
has clicked. It is shown below