Primeng calendar Angular 6 tutorial with examples


Primeng Calendar

In this tutorial, We are going to learn the Basics of Priming calendar with examples. Primeng is a group of Rich UI elements for Angular 6 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 to select time and  date

Creation of Angular 6 Application using CLI tool

First, install angular-cli tool using 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  
`  

Angular-cli is installed, Cli provides various commands to work with ANgular application/components code. Now you are ready with application creation using

`ng new calendardemo  
`  

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

`npm install  
  
`  

To start the angular application, Please issue ng serve command

`  
ng serve  
`  

Server is started with default port 4200

Setup Primeng with Angular6 

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

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

styles Configuration 

Modify angular.json file as per below. angular.json is 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

 Next step is to add CalendarModule in app.module.ts

import {CalendarModule} from 'primeng/calendar';  

html changes

Add calendar HTML code in app.component.html ngModel is set as selectDate. This acts as a two-way data binding between UI and Modal

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

Typescript changes

export class AppComponent implements OnInit{  
     selectDate: Date;  
}  

primeng calendar angular 6 tutorial with examples

Similar Posts