Angular PrimeNG Form Calendar Styling 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 Angular PrimeNG Form Calendar Styling Component.

The Form Calendar component is used to take input of date and/or time from the user. There are 11 structural styling classes for the calendar component which are listed below.

Angular PrimeNG Form Calendar Styling Classes:

• p-calendar: It is the main container element of the calendar component.
• p-calendar-w-btn: It is the main container element when the button is enabled.
• p-calendar-timeonly: It is the main container element when the element is set to timeOnly mode.
• p-inputtext: It is the input element of the calendar component.
• p-datepicker: It is the datepicker element of the calendar component.
• p-datepicker-inline: It is the datepicker element in inline mode.
• p-datepicker-monthpicker: It is the datepicker element in the month view mode.
• p-datepicker-touch-p: It is the datepicker element in the touch p mode.
• p-datepicker-calendar: It is the table containing the dates of the month.
• p-datepicker-current-day: It is the cell of the selected date.
• p-datepicker-today: It is the cell of the today’s date.

Syntax:

// File: app.component.html
<p-calendar  
    [(ngModel)]="selected1">
</p-calendar>

// File: app.component.css
:host ::ng-deep .Styling-Class{
    // CSS
}

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 used the p-calendar and the p-datepicker-today styling classes to change the styling of the calendar component.

• app.component.html

HTML

<h1 style="color:green">GeeksforGeeks</h1>
<h3>
    Angular PrimeNG Form Calendar Styling Component
</h3>

<p-calendar
    [inline]="isInline"
    [(ngModel)]="selected">
</p-calendar>

• app.component.css

CSS

:host ::ng-deep .p-calendar{
    border: 2px solid green;
    border-radius: 10px;
}

:host ::ng-deep .p-calendar
    .p-datepicker table td.p-datepicker-today>span,
:host ::ng-deep .p-calendar .p-datepicker
    table td.p-datepicker-today>span:hover {
    background-color: green;
    color: white;
    font-weight: bold;
}

• app.component.ts:

Javascript

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

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

export class AppComponent {
    selected!: Date;
    isInline = true;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CalendarModule } from "primeng/calendar";

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

Output:

Example 2: In this example, we used the p-datepicker and p-datepicker-calendar styling classes to change the styling of the calendar component. 

• app.component.html:

HTML

<h1 style="color:green">GeeksforGeeks</h1>
<h3>
    Angular PrimeNG Form Calendar Styling Component
</h3>

<h5>Default Calendar Component</h5>
<p-calendar
    [(ngModel)]="selected1">
</p-calendar>

<h5>Custom Styled Calendar Component</h5>
<p-calendar
    class="custom-cal"
    [(ngModel)]="selected2">
</p-calendar>

• app.component.css:

CSS

:host ::ng-deep .custom-cal .p-datepicker-calendar {
    border: 5px solid red;
    border-radius: 10px;
}

:host ::ng-deep .custom-cal .p-datepicker-calendar thread{
    border: 5px solid red;
    color: white;
    background-color: black;
}

• app.component.ts:

Javascript

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

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

export class AppComponent {
    selected1!: Date;
    selected2!: Date;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CalendarModule } from "primeng/calendar";

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

Output:

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