Angular PrimeNG Form Calendar Multiple Months 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 see how to use the Calendar Form with the Multiple Months component in Angular PrimeNG. The Calendar component can be 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 Multiple Months Component is used to show multiple months calendar at the same time. The number of calendars depends on the number specified in the [numberOfMonths] property.

Syntax:

<p-calendar
  placeholder="...."
  inputId="..."
  [numberOfMonths]="...">
</p-calendar>

Angular PrimeNG Form Calendar Multiple Months Properties:

• numberOfMonths: It is used to specify the number of months to display.

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.

Project Structure

Example 1: Below is the example that illustrates the use of the Angular PrimeNG Form Multiple Months Component.

app.component.html

<h2 style="color: green">GeeksforGeeeks</h2>
<h5>PrimeNG Tooltip Delay - showDelay</h5>
<div class="p-grid p-fluid">
    <div class="p-col-12 p-md-3">
        <input type="text"
               pInputText pTooltip="It is a tooltip"
               placeholder="Hover here..."
               tooltipEvent="hover"
               showDelay="2000" />
    </div>
</div>

app.component.ts

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

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
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 {}

• Run the below command:

ng serve --open

Output:

Example 2: Below is another example that illustrates the use of the Angular PrimeNG Form Multiple Months Component.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>PrimeNg Calendar Multiple Months Component</h4>
<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <p-calendar
           placeholder="Select multiple dates"
           inputId="mltimonths"
           [numberOfMonths]="3">
    </p-calendar>
    </div>
</div>

app.component.ts

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

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
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 {}

Output:

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