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]
})
export class AppModule { }
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 class="container">
<div class="row">
<div class="col-xs-12">
<input type="text"
placeholder="Choose date"
class="form-control"
bsDatepicker>
</div>
<div class="col-xs-12">
<input
type="text"
placeholder="Choose date"
class="form-control"
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
.
-
Date: