Angular PrimeNG Calendar Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the calendar component in angular ngx bootstrap.

Calendar component: It is used to display a month-wise calendar that allows the user to select dates and move to the next or previous month.

Properties:

• defaultDate: It is used to set the default date to highlight on the first opening if the field is blank.
• selectionMode: It is used to define the quantity of the selection, valid values are “single”, “multiple” and “range”.
• style: It is used to give the Inline style of the component.
• styleClass: It is the Style class of the component.
• inputStyle: It is used to set the Inline style of the input field.
• inputStyleClass: It is used to set the Style class of the input field.
• inputId: It is an ID identifier of the underlying input element.
• name: It is used to set the Name of the input element.
• placeholder: It is used to set the Placeholder text for the input.
• Disabled: It is used to disable the checkbox.
• dateFormat: It is used to set the Format of the date which can also be defined at locale settings.
• inline: It is used to display the calendar as inline. Default is false for popup mode.
• showOtherMonths: It is used to display dates in other months (non-selectable) at the start or end of the current month.
• showIcon: It is used to display a button with an icon next to the input.
• showOnFocus: It is used to set focus on component.
• showWeek: It is used to show week numbers.
• Icon: It is used to the icon of the calendar button.
• appendTo: This property takes the ID of the element on Which overlay is appended to.
• readonlyInput: It is used to prevent entering the date manually with the keyboard.
• shortYearCutoff: It is used to show the cutoff year for determining the century for a date.
• minDate: It is used to show the minimum selectable date.
• maxDate: It is used to show the maximum selectable date.
• disabledDates: It is used to show the array with dates that should be disabled (not selectable).
• disabledDays: It is used to show the array with weekday numbers that should be disabled (not selectable).
• monthNavigator: It is used to show whether the month should be rendered as a dropdown instead of text.
• yearNavigator: It is used to show whether the year should be rendered as a dropdown instead of text.
• yearRange: It is used to show the range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
• showTime: It is used to show the display timepicker.
• hourFormat: It is used to specify a 12 or 24-hour format.
• locale: It is used to show an object having regional configuration properties for the calendar.
• timeOnly: It is used to show the display timepicker only.
• timeSeparator:  It is used to show the separator of the time selector.
• dataType: It is the type of the value to write back to ngModel, default is date and alternative is a string.
• required: It is used to specifies that an input field must be filled out before submitting the form.
• Tabindex: It is used to set the Index of the element in tabbing order.
• ariaLabelledBy: It is the ariaLabelBy property that Establishes relationships between the component and label(s) where its value should be one or more element IDs.
• showSeconds: It is used to specify Whether to show the seconds in the time picker.
• stepHour: It is used to specify Hours to change per step.
• stepMinute: It is used to specify Minutes to change per step.
• stepSecond: It is used to specify Seconds to change per step.
• maxDateCount: It is used to specify a maximum number of selectable dates in multiple modes.
• showButtonBar: It is used to specify whether to display today and clear buttons at the footer.
• todayButtonStyleClass: It is used to specify the Style class of the today button.
• clearButtonStyleClass: It is used to specify the Style class of the clear button.
• baseZIndex: It is used to specify the Base zIndex value to use in layering.
• autoZIndex: It is used to specify whether to automatically manage layering.
• panelStyleClass: It is used to specify the Style class of the datetimepicker container element.
• panelStyle: It is used to set the Inline style of the datetimepicker container element.
• keepInvalid: It is used to Keep invalid values when input blur.
• hideOnDateTimeSelect: It is used to specify whether to hide the overlay on date selection.
• numberOfMonths: It is used to specify the number of months to display.
• view: It is used to specify the type of view to display.
• multipleSeparator: It is used to specify Separator for multiple selection mode.
• rangeSeparator: It is used to specify Separator for joining start and end dates on range selection mode.
• touchUI: It is used to specify a calendar overlay that is displayed as optimized for touch devices.
• focusTrap: It is used to specify only focus on elements inside the calendar.
• showTransitionOptions: It is used to set the Transition options of the show animation.
• hideTransitionOptions: It is used to set the Transition options of the hide animation.
• firstDayOfWeek: It is used to defines the first of the week for various date calculations.

Events:

• onSelect: It specifies a callback to invoke when a date is selected. Note that this event is not called when the value is entered from the input manually.
• onBlur: It specifies a callback to invoke on blur of an input field.
• onFocus: It specifies a callback to invoke on focus of input field.
• onClose: It specifies a callback to invoke when the datepicker panel is closed.
• onShow: It specifies a callback to invoke when the datepicker panel is visible.
• onClickOutside: It specifies a callback to invoke when clicking outside of the datepicker panel.
• onInput: It specifies a callback to invoke when input field is being typed.
• onTodayClick: It specifies a callback to invoke when today button is clicked.
• onClearClick: It specifies a callback to invoke when the clear button is clicked.
• onMonthChange: It specifies a callback to invoke when a month is changed using the navigators.
• onYearChange: It specifies a callback to invoke when a year is changed using the navigators.

Styling:

• p-calendar: It specifies the main container element.
• p-calendar-w-btn: It specifies the main container element when a button is enabled.
• p-calendar-timeonly: It specifies the main container element in time picker only mode.
• p-inputtext: It specifies an input element.
• p-datepicker: It specifies the Datepicker element.
• p-datepicker-inline: It specifies the Datepicker element in inline mode.
• p-datepicker-monthpicker: It specifies the Datepicker element in month view.
• p-datepicker-touch-p: It specifies the Datepicker element in touch p mode.
• p-datepicker-calendar: It specifies a table containing dates of a month.
• p-datepicker-current-day: It specifies the cell of the selected date.
• p-datepicker-today: It specifies the cell of today’s date.

Templates:

• header: It is used to define the header.
• footer: It is used to define the footer.
• decade $implicit: It is an array containing the start and year of a decade to display at the header of the year picker.
• date $implicit: It is used to define the header.

Methods:

• toggle: This helps to toggle the visibility of the calendar.

Date Formats:

• 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 in short form
• DD: Day name in long form
• m: Month of year (no leading zero)
• mm: Month of year (two-digit)
• M: Month name in short form
• MM: Month name in long form
• 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

Creating Angular Application & Module  Installation:

• Step 1: Create an Angular application using the following command.

  ng new appname

• Step 2: After creating your project folder i.e. appname, move to it using the following command.

  cd appname

• Step 3: Install PrimeNG in your given directory.

  npm install primeng --save
  npm install primeicons --save

Project Structure: It will look like the following.

Example 1: This is the basic example that shows how to use calendar component

app.component.html

<h2>GeeksforGeeks</h2>
<h4>PrimeNg Calendar Component</h4>
<p-calendar [inline]="true" [showWeek]="true"></p-calendar>

• app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from
    "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";

import { CalendarModule } from "primeng/calendar";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

Output:

Example 2: we will use a popup style calendar.

app.component.html

<div class="p-fluid p-grid p-formgrid">
  <div class="p-field p-col-12 p-md-4">
    <label>Basic</label>
    <p-calendar></p-calendar>
  </div>
  <div class="p-field p-col-12 p-md-4">
    <label>Calendar with Time</label>
    <p-calendar [showTime]="true"></p-calendar>
  </div>
</div>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";

import { CalendarModule } from "primeng/calendar";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

• app.component.ts

Javascript

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

Output:

Reference: https://primeng.org/calendar