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
| Eigenschaft | Typ | Standard | Beschreibung |
|---|---|---|---|
enableAutoRecalculate | boolean | true | Berechnet Terminsegmente automatisch neu, wenn sich Datumsangaben ändern. |
enableValidation | boolean | true | Prüft Terminobjekte vor dem Hinzufügen oder Aktualisieren. |
maxEventsPerDay | number | 50 | Maximale 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.