Angular компонент
Этот пример рассчитан на Angular 15+ (standalone-компоненты).
Для демонстрации давайте создадим простой Angular компонент для Vanilla Calendar Pro. Создайте файл с именем vanilla-calendar.component.ts и скопируйте в него следующий код:
import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
import { Calendar, Options } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css';
@Component({
selector: 'vanilla-calendar',
standalone: true,
template: `<div #calendarRef></div>`,
})
export class VanillaCalendarComponent implements AfterViewInit {
@Input() config?: Options;
@ViewChild('calendarRef') calendarRef!: ElementRef<HTMLDivElement>;
ngAfterViewInit() {
const calendar = new Calendar(this.calendarRef.nativeElement, this.config);
calendar.init();
}
}Затем импортируйте созданный компонент VanillaCalendarComponent в компонент, где вы планируете отображать календарь.
// ...
import { VanillaCalendarComponent } from './vanilla-calendar.component';
// ...Добавьте его в массив imports standalone-компонента и используйте в шаблоне.
@Component({
// ...
imports: [VanillaCalendarComponent],
template: `
<!-- -->
<vanilla-calendar />
<!-- -->
`,
})Компоненту VanillaCalendarComponent можно передать любые атрибуты HTML, поддерживаемые тегом <div> (Angular автоматически передаёт их на хост-элемент), а также параметр config для настройки календаря.
template: `
<!-- -->
<vanilla-calendar [config]="{ type: 'multiple' }" class="thisIsMyClass" />
<!-- -->
`,