イベントサービスプラグイン

イベントサービスプラグインは、バリデーション、フィルタリング、複雑なクエリなど、高度なイベント管理機能を提供します。

インストール

イベントサービスプラグインは現在、@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: [
      /* ビュー */
    ],
    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: [
    /* ビュー */
  ],
  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 {
  calendar = {
    views: [
      /* ビュー */
    ],
    plugins: [
      createEventsPlugin({
        enableValidation: true,
        maxEventsPerDay: 50,
      })
    ]
  };
}

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

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

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

<DayFlowCalendar {calendar} />

設定項目

プロパティ	型	デフォルト値	説明
`enableAutoRecalculate`	`boolean`	`true`	日付が変更されたときにイベントのセグメントを自動的に再計算します。
`enableValidation`	`boolean`	`true`	追加または更新前にイベントオブジェクトをバリデーションします。
`maxEventsPerDay`	`number`	`50`	1日あたりの最大イベント数。

プラグイン API

EventsService にアクセスして、高度なクエリを実行します：

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

// 特定の日付のイベントを取得
const events = eventsService.getByDate(new Date());

// イベントをフィルタリング
const workEvents = eventsService.filterEvents(
  allEvents,
  e => e.calendarId === 'work'
);

利用可能なメソッド

getAll(): すべてのイベントを取得します。
getById(id): 特定のイベントを検索します。
getByDate(date): 特定の日に発生するイベントを取得します。
getByDateRange(start, end): 指定した範囲内のイベントを取得します。
validateEvent(event): バリデーションエラーの配列を返します。

イベントサービス プラグイン

インストール

使い方

設定項目

プラグイン API

利用可能なメソッド

On this page

イベントサービスプラグイン