Angular Component
This example targets Angular 15+ (standalone components).
To demonstrate, let's create a simple Angular component for Vanilla Calendar Pro. Create a file named vanilla-calendar.component.ts and copy the following code into it:
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();
}
}Then import the created VanillaCalendarComponent into the component where you want to display the calendar.
// ...
import { VanillaCalendarComponent } from './vanilla-calendar.component';
// ...Add it to the imports array of a standalone component and use it in the template.
@Component({
// ...
imports: [VanillaCalendarComponent],
template: `
<!-- -->
<vanilla-calendar />
<!-- -->
`,
})The VanillaCalendarComponent can accept any HTML attributes supported by the <div> tag (Angular forwards them to the host element automatically), as well as the config input for configuring the calendar.
template: `
<!-- -->
<vanilla-calendar [config]="{ type: 'multiple' }" class="thisIsMyClass" />
<!-- -->
`,