Events Service Plugin

The Events Service plugin provides advanced event management capabilities, including validation, filtering, and complex querying.

Installation

The Events Service plugin is currently part of the @dayflow/core package.

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

Usage

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} />

Configuration

PropertyTypeDefaultDescription
enableAutoRecalculatebooleantrueAutomatically recalculate event segments when dates change.
enableValidationbooleantrueValidate event objects before adding or updating.
maxEventsPerDaynumber50Maximum number of events allowed per day.

Plugin API

Access the EventsService to perform advanced queries:

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'
);

Available Methods

  • getAll(): Get all events.
  • getById(id): Find a specific event.
  • getByDate(date): Get events occurring on a specific date.
  • getByDateRange(start, end): Get events within a range.
  • validateEvent(event): Returns an array of validation errors.

On this page