Primeng calendar Angular tutorial with examples

Primeng calendar Angular tutorial with examples

Primeng Calendar

In this tutorial, We are going to learn the Basics of the Priming calendar with examples. Primeng is a group of Rich UI elements for the Angular 12 library. The calendar is a component for selecting a date by the user.

Calendar features

  • Supports Multi-languages
  • Two Way binding
  • Able to customize as per user requirements
  • Allows selecting time and date

Creation of Angular 12 Application using CLI tool

First, install the angular-cli tool using an npm package manager. Angular-cli is a command-line tool to create an Angular application.

npm install @angular/cli -g

Once installed, To test Angular-cli installation, Please issue a version command.

B:\angularclidemo>ng --version

It gives the angular version installed on your application. if it gives a version number, then Angular-cli is installed.

Cli provides various commands to create Angular application/components code.

Now you are ready with an application created using the below cli command

ng new calendardemo

This creates a calendar demo application with all initialization configurations and code. Install dependencies using the npm install command

npm install

To start the angular application, Please issue the ng serve command.

ng serve

The server is started with default port 4200

Setup Primeng with Angular 12

To install primeng for the angular 12 application, You need to add primeng and font-awesome dependencies

 yarn add primeng font-awesome
 npm install primeng font-awesome

primeng styles Configuration

Modify the angular.json file as per below. angular.json is a project global configuration file

"styles": [
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
]

Import CalendarModule into the Angular application

The next step is to add CalendarModule in app.module.ts so that all the components and directives of this module are accessible in components.

import { CalendarModule } from "primeng/calendar";

p-calendar tag in html template

Add calendar HTML code in app.component.html. ngModel is set as selectDate which populates the data from DOM to the model. This acts as a two-way data binding between UI and Modal

<p-calendar [(ngModel)]="selectDate"></p-calendar>

Typescript Componentschanges

export class AppComponent implements OnInit {
  selectDate: Date;
}

Output

primeng calendar angular 14 tutorial with examples