Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial

In this tutorial, we’ll see how to create an Angular 9 calendar UI with the datepicker component available from ngx-bootstrap.

We’ll learn to build a calendar component using bootstrap and ngx-bootstrap datepicker component.

Date pickers are commonly used in web apps for choosing dates.

Dates can be selected by navigating between various dates using UI.

The ngx-bootstrap library provides a datepicker component with many configuration options that you can use to customize the calendar view in your Angular 9 web app.

Throughout this tutorial, we will learn with steps to build a calendar component.

Initializing an Angular 9 Calendar App with Angular CLI

Let’s start bu initilizing a new Angular 9 app for our calendar example using Angular CLI.

We need to have the following prerequisites:

• Node.js and NPM installed on your development machine,
• Angular CLI v9 installed on your machine.

Generating your Angular 9 Project

Open a new command-line interface and run the following command:

ng new angular-9-calendar-example

Navigate to your project’s folder using:

cd angular-9-calendar-example

Adding Bootstrap to Angular 9

Next, we need to integrate bootstrap and ngx-bootstrap with your Angular 9 project.

First, run the following command to install bootstrap 4 from npm:

npm install bootstrap --save

Next, install the ngx-bootstrap package:

npm install ngx-bootstrap --save

Importing and Configuring the Datepicker Component

Open the angular.json file and add the following styling:

"styles":["node_modules/bootstrap/dist/css/bootstrap.min.css","node_modules/ngx-bootstrap/datepicker/bs-datepicker.css","src/styles.css"]

Next, we need to import the date picker component. Open src/app/app.module.ts file and update it as follows:

import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';import{BsDatepickerModule}from'ngx-bootstrap/datepicker';@NgModule({declarations:[AppComponent],imports:[BrowserModule,BrowserAnimationsModule,BsDatepickerModule.forRoot()],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}

Adding a Calendar UI in your Angular 9 Template

Next, let’s add a calendar component. Open the src/app/app.component.html file and add the following HTML code:

<div >  <div >    <div >      <input type="text"            placeholder="Choose date"                        bsDatepicker>    </div>    <div >      <input        type="text"        placeholder="Choose date"                bsDatepicker        bsDaterangepicker        [bsConfig]="{ isAnimated: true }">    </div>  </div></div>

That’s it, save your file and run the following command in your terminal:

ng serve

Conclusion

In this tutorial, we have a simple example of a calendar with the datepicker component of ngx-bootstrap.