이벤트 서비스 플러그인

이벤트 서비스 플러그인은 검증, 필터링, 복합 조회 등 고급 이벤트 관리 기능을 제공합니다.

설치

이벤트 서비스 플러그인은 현재 @dayflow/core 패키지에 포함되어 있습니다.

import { createEventsPlugin } from '@dayflow/core';

사용법

import {
  useCalendarApp,
  DayFlowCalendar,
  createEventsPlugin,
} from '@dayflow/react';

function MyCalendar() {
  const eventsPlugin = createEventsPlugin({
    enableValidation: true,
    maxEventsPerDay: 50,
  });

  const calendar = useCalendarApp({
    views: [
      /* your views */
    ],
    plugins: [eventsPlugin],
  });

  return <DayFlowCalendar calendar={calendar} />;
}
<template>
  <DayFlowCalendar :calendar="calendar" />
</template>

<script setup>
import { DayFlowCalendar, useCalendarApp } from '@dayflow/vue';
import { createEventsPlugin } from '@dayflow/core';

const eventsPlugin = createEventsPlugin({
  enableValidation: true,
  maxEventsPerDay: 50,
});

const calendar = useCalendarApp({
  views: [
    /* your views */
  ],
  plugins: [eventsPlugin],
});
</script>
import { Component } from '@angular/core';
import { DayFlowCalendarModule } from '@dayflow/angular';
import { createEventsPlugin } from '@dayflow/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayFlowCalendarModule],
  template: `<dayflow-calendar [calendar]="calendar"></dayflow-calendar>`
})
export class AppComponent {
  eventsPlugin = createEventsPlugin({
    enableValidation: true,
    maxEventsPerDay: 50,
  });

  calendar = {
    views: [
      /* your views */
    ],
    plugins: [this.eventsPlugin]
  };
}
<script>
  import { DayFlowCalendar, useCalendarApp } from '@dayflow/svelte';
  import { createEventsPlugin } from '@dayflow/core';

  const eventsPlugin = createEventsPlugin({
    enableValidation: true,
    maxEventsPerDay: 50,
  });

  const calendar = useCalendarApp({
    views: [
      /* your views */
    ],
    plugins: [eventsPlugin],
  });
</script>

<DayFlowCalendar {calendar} />

설정

속성타입기본값설명
enableAutoRecalculatebooleantrue날짜가 바뀌면 이벤트 구간을 자동으로 다시 계산합니다.
enableValidationbooleantrue이벤트를 추가하거나 수정하기 전에 객체를 검증합니다.
maxEventsPerDaynumber50하루에 허용되는 최대 이벤트 수입니다.

플러그인 API

고급 조회를 하려면 EventsService에 접근하세요:

const eventsService = calendar.app.getPlugin<EventsService>('events');

// Get events for a specific day
const events = eventsService.getByDate(new Date());

// Filter events
const workEvents = eventsService.filterEvents(
  allEvents,
  e => e.calendarId === 'work'
);

사용 가능한 메서드

  • getAll(): 모든 이벤트를 가져옵니다.
  • getById(id): 특정 이벤트를 찾습니다.
  • getByDate(date): 특정 날짜에 해당하는 이벤트를 가져옵니다.
  • getByDateRange(start, end): 지정한 범위 안의 이벤트를 가져옵니다.
  • validateEvent(event): 검증 오류를 담은 배열을 반환합니다.

이 페이지의 내용