Angular PrimeNG Form Calendar Disable specific dates and/or days Component

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will be discussing the Angular PrimeNG Form Calendar Disable specific dates and/or days Component.

The Calendar Component is used for date and time input from the user. To disable specific dates and/or dates first set the readonlyInput to true so that the user cannot enter the dates using the keyboard. Now disable the dates using the disabledDates property and/or disable days using the disabledDays property. 

Angular PrimeNG Form Calendar Disable specific dates and/or days Properties:

• readonlyInput: This property is used to disable the manual entering of the date by the user.
• disabledDates: It specifies the disabled dates which cannot be selected. It accepts an array of type Date and the default value is null.
• disabledDays: It specifies the disabled days in a calendar. It accepts an array of type Number (weekday numbers). The default value is null.

Syntax:

<p-calendar 
    [(ngModel)]="..." 
    [disabledDates]="..." 
    [disabledDays]="[0,1]" 
    [readonlyInput]="true">
</p-calendar>

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we disabled “10/2/2022”, “10/4/2022”, and “10/6/2022” so these dates cannot be selected by the user.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar Disable
    specific dates and/or days Component</h4>

<p-calendar
    [(ngModel)]="calendarVal"
    [disabledDates]="disabledDatesArr"
    [readonlyInput]="true">
</p-calendar>

app.component.ts

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

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

export class AppComponent {
    calendarVal?: Date;
    disabledDatesArr = [
        new Date("10/2/2022"),
        new Date("10/4/2022"),
        new Date("10/6/2022")
    ];
}

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,
        FormsModule,
        CalendarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: In this example, we set the disabledDays to [0, 2, 4] to disable the selection of Sundays, Tuesdays, and Thursdays.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar Disable
    specific dates and/or days Component</h4>

<p-calendar
    [(ngModel)]="calendarVal"
    [disabledDays]="[0,2,4]"
    [readonlyInput]="true">
</p-calendar>

app.component.ts

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

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

export class AppComponent {
    calendarVal?: Date;
}

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,
        FormsModule,
        CalendarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

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