Angular PrimeNG Form Calendar Custom Content Component

Angular PrimeNG is a collection of UI components for the Angular framework developed and maintained by Google. It enables developers to develop scalable and responsive interfaces in less time and hence increases productivity. In this article, we will see Angular PrimeNG Form Calendar Custom Content Component.

The Calendar Component is used to input the user’s date and time. Custom content can be added to the calendar by using the header and footer templates provided by the calendar component.

Angular PrimeNG Form Calendar Custom Content Properties:

• inline: This property is used to show the calendar in inline mode.

Angular PrimeNG Form Calendar Custom Content Templates:

• header: This template is used to add content to the top of the calendar UI.
• footer: This template is used to add content to the bottom of the calendar UI.

Syntax:

<p-calendar [(ngModel)]="...">
    <ng-template pTemplate="header">
        ...
    </ng-template>
    <ng-template pTemplate="footer">
        ...
    </ng-template>
</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 used the header template to add custom content to the header of the calendar UI. 

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar
    Custom Content Component</h4>

<p-calendar
    [(ngModel)]="calendarVal"
    [inline]="true">

    <ng-template pTemplate="header">
        <div class="text-center">
            <h4
                style="color: green;">
                GeeksforGeeks Calendar
            </h4>
        </div>
    </ng-template>
</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:

Example 2: In this example, we used both the header and footer template to add custom content to the header and footer of the calendar UI.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form Calendar
    Custom Content Component</h4>

<p-calendar
    [(ngModel)]="calendarVal"
    [inline]="true">

    <ng-template pTemplate="header">
        <div class="text-center">
            <h4>
                Header Custom Content
            </h4>
        </div>
    </ng-template>

    <ng-template pTemplate="footer">
        <div class="text-center">
            <h4>
                Footer Custom Content
            </h4>
        </div>
    </ng-template>
</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