Angular PrimeNG Form Calendar Events

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 see the Angular PrimeNG Form Calendar Events Component.

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

Angular PrimeNG Form Calendar Events Component:

• onSelect: It specifies a callback to invoke while selecting the date. When the value is entered from the input manually, then this event will not be called.
• onBlur: It is a callback that is used to call on blur for the specific input field.
• onFocus: It is a callback that is used to call the on focus for the specific input field.
• onClose: It is a callback that is used to call when the date picker panel is closed.
• onShow: It is a callback that is used to call when the date picker panel is visible.
• onClickOutside: It is a callback that is used to call when clicking outside of the date picker panel.
• onInput: It is a callback that is used to call when the input field is being typed.
• onTodayClick: It is a callback that is used to call when the today button is clicked.
• onClearClick: It is a callback that is used to call when the clear button is clicked.
• onMonthChange: It is a callback that is used to call when a month is changed using the navigators.
• onYearChange: It is a callback that is used to call when a year is changed using the navigators.
• onClear: It specifies a callback for calling while clearing the input field.

Syntax:

<p-calendar [inline]="true" 
            [showWeek]="true" 
            (event)=function()>
</p-calendar>

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:

• Steps to run the application: Run the below command to see the output

ng serve --save

Example 1: This example describes the Angular PrimeNG Form Calendar Events Component onSelect Event.

• app.component.html:

HTML

<h1 style="color: green;">
  GeeksforGeeks
</h1>
<h2>
      Angular PrimeNG Form Calendar Events Component
</h2>

<p-calendar [inline]="true"
            [showWeek]="true"
            (onSelect)="onSelect()">
</p-calendar>

• app.component.ts:

Javascript

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

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

export class AppComponent {
    onSelect() {
        alert("Hi Geek!! Date is Selected");
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CalendarModule } from "primeng/calendar";

@NgModule({
    imports: [
        BrowserAnimationsModule,
        CalendarModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Example 2: This is another example that describes the Angular PrimeNG Form Calendar Events Component by implementing the onMonthChange Event.

• app.component.html:

HTML

<h1 style="color: green;">
  GeeksforGeeks
</h1>
<h2>
  Angular PrimeNG Form Calendar Events Component
</h2>

<p-calendar [inline]="true"
            [showWeek]="true"
            (onMonthChange)="onMonthChange()">
</p-calendar>

• app.component.ts:

Javascript

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

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

export class AppComponent {
    onMonthChange() {
        alert("Hi Geek!! Month is Changed");
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CalendarModule } from "primeng/calendar";

@NgModule({
    imports: [
        BrowserAnimationsModule,
        CalendarModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Reference: http://primefaces.org/primeng/calendar