Angular 9 Calendar with ngx-bootstrap datepicker example

Angular 9 Calendar Integration Example

Following is the comprehensive step by step guide on integrating the calendar in Angular application.
Setting up Angular Project
Run the following command to create a new angular application.

ng new angular-calendar-app

Get inside the project folder:

cd angular-calendar-app

Once the angular app is downloaded from npm, then go through the given below steps.

Configure Calendar Module in Angular 9

In order to work with dates in Angular, we need to install the two packages via node package manager (npm).
First, run the command to install Bootstrap 4:

npm install bootstrap --save

Next, we are going to install ngx-bootstrap package in our Angular app and it works only with Bootstrap.

npm install ngx-bootstrap --save

Then, Add the Bootstrap, NGX Datepicker CSS path in angular.json file to enable the styling of Bootstrap and Calendar UI components.

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

Start the app in the browser using the given below command:

ng serve --open

Import Date Picker in AppModule

To get started with the calendar, we need to import the date picker in Angular’s main module file
Open app.module.ts file and add the following code.

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

Use Basic Calendar in Angular

In this step, we will learn how to create a simple calendar, Add the following code in your Angular template.

 <div class="container">
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
            placeholder="Datepicker"
            class="form-control"
            bsDatepicker>
    </div>
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
            placeholder="Daterangepicker"
            class="form-control"
            bsDaterangepicker>
    </div>
  </div>
</div>

Adding Animation in Calendar

Adding animation in Angular Calendar is comfortable with ngx-bootstrap. Add the following HTML code in your angular template.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input
      type="text"
      placeholder="Datepicker"
      class="form-control"
      bsDatepicker
      [bsConfig]="{ isAnimated: true }">
    </div>
  </div>
</div>

For enabling the animation in Calendar, we bind bsConfig tag, set isAnimated value to true in HTML input field.

 Angular 9/8 Date Range Picker in Calendar

Integrating Date Range Picker in Calendar is turned on by just adding the bsDaterangepicker directive in datepicker HTML input field.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input
      type="text"
      placeholder="Datepicker"
      class="form-control"
      bsDatepicker
      bsDaterangepicker
      [bsConfig]="{ isAnimated: true }">
    </div>
  </div>
</div>