Termin-Dienst-Plugin

Das Termin-Dienst-Plugin bietet erweiterte Funktionen zur Terminverwaltung, darunter Validierung, Filterung und komplexe Abfragen.

Installation

Das Termin-Dienst-Plugin ist derzeit Teil des Pakets @dayflow/core.

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

Verwendung

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

Konfiguration

EigenschaftTypStandardBeschreibung
enableAutoRecalculatebooleantrueBerechnet Terminsegmente automatisch neu, wenn sich Datumsangaben ändern.
enableValidationbooleantruePrüft Terminobjekte vor dem Hinzufügen oder Aktualisieren.
maxEventsPerDaynumber50Maximale Anzahl von Terminen pro Tag.

Plugin-API

Über EventsService führen Sie erweiterte Abfragen aus:

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

Verfügbare Methoden

  • getAll(): liefert alle Termine.
  • getById(id): sucht einen bestimmten Termin.
  • getByDate(date): liefert die Termine eines bestimmten Datums.
  • getByDateRange(start, end): liefert die Termine innerhalb eines Zeitraums.
  • validateEvent(event): gibt ein Array mit den Validierungsfehlern zurück.

Auf dieser Seite