Angular PrimeNG表格日历自定义内容组件

Angular PrimeNG是一个由谷歌开发和维护的Angular框架的UI组件集合。它使开发人员能够在更短的时间内开发出可扩展和响应式的界面，从而提高生产力。在这篇文章中，我们将看到Angular PrimeNG表格日历自定义内容组件。

日历组件是用来输入用户的日期和时间的。通过使用日历组件提供的页眉和页脚模板，可以将自定义内容添加到日历中。

Angular PrimeNG表格日历自定义内容属性：

inline:此属性用于以内联模式显示日历。

Angular PrimeNG表格日历自定义内容模板：

header。该模板用于在日历用户界面的顶部添加内容。
footer。该模板用于在日历用户界面的底部添加内容。

语法:

<p-calendar [(ngModel)]="...">
    <ng-template pTemplate="header">
        ...
    </ng-template>
    <ng-template pTemplate="footer">
        ...
    </ng-template>
</p-calendar>

创建Angular应用程序并安装模块：。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG表格日历自定义内容组件

Project Structure

例子1：在这个例子中，我们使用了标题模板，将自定义内容添加到日历用户界面的标题上。

<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>

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent { 
    calendarVal?: Date;
}

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 { }

输出:

Angular PrimeNG表格日历自定义内容组件

例子2：在这个例子中，我们同时使用了页眉和页脚模板，在日历用户界面的页眉和页脚中添加了自定义内容。

<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>

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent { 
    calendarVal?: Date;
}

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 { }

输出:

Angular PrimeNG表格日历自定义内容组件