{

Primeng calendar Angular tutorial with examples


Primeng Angular 13 Calendar example

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 to 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 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 is 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 that populates the data from DOM to 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 12 tutorial with examples
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.