Angular PrimeNG Form Calendar Styling Component
Last Updated :
26 Apr, 2025
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.
HTML
<h1 style="color:green">GeeksforGeeks</h1>
<h3>
Angular PrimeNG Form Calendar Styling Component
</h3>
<p-calendar
[inline]="isInline"
[(ngModel)]="selected">
</p-calendar>
|
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;
}
|
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;
}
|
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.
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>
|
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;
}
|
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;
}
|
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: