Компонент оформления календаря формы Angular PrimeNG

Опубликовано: 21 Февраля, 2023

Angular PrimeNG — это набор компонентов интерактивного пользовательского интерфейса для приложений Angular. Разработчики могут использовать эти компоненты для быстрого создания красивых и отзывчивых веб-интерфейсов, поскольку в большинстве компонентов реализованы все необходимые функции. В этой статье мы обсудим компонент оформления календаря формы Angular PrimeNG.

Компонент Form Calendar используется для ввода даты и/или времени от пользователя. Существует 11 классов структурного стиля для компонента календаря, которые перечислены ниже.

Классы оформления календаря формы Angular PrimeNG:

p-calendar: это основной элемент-контейнер компонента календаря.
p-calendar-w-btn: это основной элемент контейнера, когда кнопка включена.
p-calendar-timeonly: это основной элемент контейнера, когда элемент установлен в режим timeOnly.
p-inputtext: это элемент ввода компонента календаря.
p-datepicker: это элемент datepicker компонента календаря.
p-datepicker-inline: это элемент выбора даты в встроенном режиме.
p-datepicker-monthpicker: это элемент выбора даты в режиме просмотра месяца.
p-datepicker-touch-p: это элемент выбора даты в сенсорном режиме p.
p-datepicker-calendar: это таблица, содержащая даты месяца.
p-datepicker-current-day: это ячейка выбранной даты.
p-datepicker-today: это ячейка с сегодняшней датой.

Синтаксис:

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

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

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

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

Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Пример 1. В этом примере мы использовали классы стилей p-calendar и p-datepicker-today, чтобы изменить стиль компонента календаря.

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

Выход:

Пример 2. В этом примере мы использовали классы стилей p-datepicker и p-datepicker-calendar, чтобы изменить стиль компонента календаря.

приложение.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>

приложение.компонент.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 thead{
    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 { }

Выход:

Ссылка: https://www.primefaces.org/primeng/calendar

Technical Scripter Picked AngularJS

Компонент оформления календаря формы Angular PrimeNG

HTML

CSS

Javascript

Javascript

HTML

CSS

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ