PrimeTek UI Component Libraries
Angular Calendar

Angular Calendar

PrimeTek's photo
PrimeTek
·

6 min read

Angular Calendar is an input component to select a date.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {CalendarModule} from 'primeng/calendar';

Getting Started

Two-way value binding is defined using the standard ngModel directive referencing to a Date property.

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

export class MyModel {

    value: Date;

}

Model Driven Forms

Calendar can be used in a model driven form as well.

<p-calendar formControlName="date"></p-calendar>

Calendar is displayed in a popup by default and inline property needs to be enabled for inline mode.

<p-calendar [(ngModel)]="value" [inline]="true"></p-calendar>

Selection Mode

By default calendar allows selecting one date and multiple dates can be selected by setting selectionMode to multiple. In this case calendar updates the value with an array of dates where optionally number of selectable dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.

DateFormat

Default date format is mm/dd/yy, to customize this use dateFormat property.

<p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy"></p-calendar>

Following options can be a part of the format.

  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of the year (no leading zeros)
  • oo - day of the year (three digit)
  • D - day name short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)
  • @ - Unix timestamp (ms since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text

I18N

Translations for the calendar are defined with the I18N API.

Time

TimePicker is enabled with showTime property and 24 (default) or 12 hour mode is configured using hourFormat option.

<p-calendar [(ngModel)]="value" showTime="true" hourFormat="12"></p-calendar>
<p-calendar [(ngModel)]="value" showTime="true" hourFormat="24"></p-calendar>

Date Restriction

To disable entering dates manually, set readonlyInput to true and to restrict selectable dates use minDate and maxDate options.

<p-calendar [(ngModel)]="dateValue" [minDate]="minDateValue" [maxDate]="maxDateValue" [readonlyInput]="true"></p-calendar>

Disable specific dates and/or days

To disable specific dates or days, set readonlyInput to true and to restrict selectable dates use disabledDates and/or disabledDays options.

<p-calendar [(ngModel)]="dateValue" [disabledDates]="invalidDates" [disabledDays]="[0,6]" [readonlyInput]="true"></p-calendar>

Button Bar

Button bar displays today and clear buttons and enabled using showButtonBar property.

<p-calendar [(ngModel)]="dateValue" showButtonBar="true"></p-calendar>

Multiple Months

Displaying multiple months is enabled by setting numberOfMonths property to a value greater than 1.

<p-calendar [(ngModel)]="dateValue" [numberOfMonths]="3"></p-calendar>

Custom Content

Calendar UI accepts custom content using header and footer templates.

<p-calendar [(ngModel)]="dateValue">
    <ng-template pTemplate="header">Header</ng-template>
    <ng-template pTemplate="footer">Footer</ng-template>
</p-calendar>

Cell contents can also be templated using an ng-template with a pTemplate directive whose value is "date". This is a handy feature to highlight specific dates. Note that the implicit variable passed to the template is not a date instance but a metadata object to represent a Date with "day", "month" and "year" properties. Example below changes the background color of dates between 10th and 21st of each month.

In addition, "disabledDateTemplate" is provided in case you need to customize the content of disabled dates as well.

<p-calendar [(ngModel)]="date10">
    <ng-template pTemplate="date" let-date>
        <span [ngStyle]="{textDecoration: (date.day < 21 && date.day > 10) ? 'line-through' : 'inherit'}">{{date.day}}</span>
    </ng-template>
</p-calendar>

Month Picker

Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.

<p-calendar [(ngModel)]="dateValue" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>

Touch UI

Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices. When using Touch UI mode you will typically want to set readonlyInput to prevent keyboard popup for mobile users.

<p-calendar [(ngModel)]="dateValue" [touchUI]="true" [readonlyInput]="true"></p-calendar>

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.

<p-calendar [(ngModel)]="dateValue" [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"></p-calendar>

Theming

Calendar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Calendar showcase for demos and documentation.

AngularAngular 2JavaScriptWeb Development