Sunday, August 26, 2018

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

Related article


EmoticonEmoticon