CalendarCalendar is an input component to select a date.

Documentation

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>
 

Popup and Inline

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 or define it at locale settings. Note that standalone property overrides the value in locale settings.

<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

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>
 

Localization

Localization for different languages and formats is defined by binding the locale settings object to the locale property. Following is the default values for English.

<p-calendar [(ngModel)]="dateValue" [locale]="en"></p-calendar>
 

export class MyModel {
    en: any;
    ngOnInit() {
        this.en = {
            firstDayOfWeek: 0,
            dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
            today: 'Today',
            clear: 'Clear',
            dateFormat: 'mm/dd/yy',
            weekHeader: 'Wk'
        };
    }
}
 

Custom Content

Calendar UI accepts custom content using p-header and p-footer components.

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

In addition, cell contents can 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.

<p-calendar [(ngModel)]="date10">
    <ng-template pTemplate="date" let-date>
        <span [ngStyle]="{backgroundColor: (date.day < 21 && date.day > 10) ? '#7cc67c' : 'inherit'}" style="border-radius:50%">{{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>
 

Properties

Events

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

Source

View on GitHub

<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-4">
        <h3>Basic</h3>
        <p-calendar [(ngModel)]="date1"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Spanish</h3>
        <p-calendar [(ngModel)]="date2" [locale]="es" dateFormat="dd/mm/yy"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Icon</h3>
        <p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Min-Max</h3>
        <p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Disable Days</h3>
        <p-calendar [(ngModel)]="date5" [disabledDates]="invalidDates" [disabledDays]="[0,6]" [readonlyInput]="true"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Navigators</h3>
        <p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Time</h3>
        <p-calendar [(ngModel)]="date7" [showTime]="true"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Time Only </h3>
        <p-calendar [(ngModel)]="date8" [timeOnly]="true"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Multiple </h3>
        <p-calendar [(ngModel)]="dates" selectionMode="multiple" [readonlyInput]="true"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Range</h3>
        <p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Button Bar</h3>
        <p-calendar [(ngModel)]="date9" showButtonBar="true"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Date Template</h3>
        <p-calendar [(ngModel)]="date11">
            <ng-template pTemplate="date" let-date>
                <span [ngStyle]="{backgroundColor: (date.day < 21 && date.day > 10) ? '#81C784' : 'inherit'}" style="border-radius:50%;padding: .25em;width: 1.75em; height:1.75em; display:block;">{{date.day}}</span>
            </ng-template>
        </p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Multiple Months</h3>
        <p-calendar [(ngModel)]="date11" [numberOfMonths]="3"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Month Picker</h3>
        <p-calendar [(ngModel)]="date12" view="month" dateFormat="mm/yy" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Touch UI</h3>
        <p-calendar [(ngModel)]="date13" [touchUI]="true"></p-calendar>
    </div>
</div>
<h3>Inline</h3>
<p-calendar [(ngModel)]="date14" [inline]="true" [showWeek]="true"></p-calendar>
 

export class CalendarDemo {
    date1: Date;
    date2: Date;
    date3: Date;
    date4: Date;
    date5: Date;
    date6: Date;
    date7: Date;
    date8: Date;
    date9: Date;
    date10: Date;
    date11: Date;
    date12: Date;
    date13: Date;
    dates: Date[];
    rangeDates: Date[];
    minDate: Date;
    maxDate: Date;
    es: any;
    invalidDates: Array<Date>
    ngOnInit() {
        this.es = {
            firstDayOfWeek: 1,
            dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
            dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
            dayNamesMin: [ "D","L","M","X","J","V","S" ],
            monthNames: [ "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre" ],
            monthNamesShort: [ "ene","feb","mar","abr","may","jun","jul","ago","sep","oct","nov","dic" ],
            today: 'Hoy',
            clear: 'Borrar'
        }
        this.tr = {
            firstDayOfWeek : 1
        }
        let today = new Date();
        let month = today.getMonth();
        let year = today.getFullYear();
        let prevMonth = (month === 0) ? 11 : month -1;
        let prevYear = (prevMonth === 11) ? year - 1 : year;
        let nextMonth = (month === 11) ? 0 : month + 1;
        let nextYear = (nextMonth === 0) ? year + 1 : year;
        this.minDate = new Date();
        this.minDate.setMonth(prevMonth);
        this.minDate.setFullYear(prevYear);
        this.maxDate = new Date();
        this.maxDate.setMonth(nextMonth);
        this.maxDate.setFullYear(nextYear);
        let invalidDate = new Date();
        invalidDate.setDate(today.getDate() - 1);
        this.invalidDates = [today,invalidDate];
    }
}