라이브러리용 컴포넌트

Angular 컴포넌트

이 예제는 Angular 15+ (standalone 컴포넌트) 기준입니다.

데모를 위해 Vanilla Calendar Pro용 간단한 Angular 컴포넌트를 만들어 보겠습니다. 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';
// ...

standalone 컴포넌트의 imports 배열에 추가하고 템플릿에서 사용하세요.

@Component({
  // ...
  imports: [VanillaCalendarComponent],
  template: `
    <!-- -->
    <vanilla-calendar />
    <!-- -->
  `,
})

VanillaCalendarComponent는 <div>가 지원하는 모든 HTML 속성(Angular가 자동으로 호스트 엘리먼트에 전달합니다)과 캘린더 설정을 위한 config 입력을 받을 수 있습니다.

template: `
  <!-- -->
  <vanilla-calendar [config]="{ type: 'multiple' }" class="thisIsMyClass" />
  <!-- -->
`,