TxScheduler · Vue · tecexpress

Tag-, Wochen- und Monatskalender mit Terminbearbeitung. Ganztagsenden sind exklusiv; keine Serien, Ressourcen oder Drag-and-drop.

Prop	Typ	Standard	Bedeutung
`dataSource`	`TxSource<Appointment> \| undefined`	`undefined`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`currentDate`	`SchedulerDate \| undefined`	`undefined`	Aktueller Kalendertag; für Navigation kontrollierten Wert aktualisieren.
`currentView`	`SchedulerView \| undefined`	`undefined`	Aktuelle Kalenderansicht.
`views`	`SchedulerView[] \| undefined`	`["day","week","month"]`	Angebotene Kalenderansichten.
`firstDayOfWeek`	`number \| undefined`	`1`	Erster Wochentag; 1 = Montag.
`startDayHour`	`number \| undefined`	`8`	Erste sichtbare Tagesstunde.
`endDayHour`	`number \| undefined`	`18`	Letzte sichtbare Tagesstunde.
`cellDuration`	`number \| undefined`	`30`	Länge einer Kalenderzelle in Minuten.
`editing`	`boolean \| SchedulerEditing \| undefined`	`true`	Berechtigungen zum Anlegen, Ändern und Löschen.
`disabled`	`boolean \| undefined`	`false`	Sperrt die Interaktion.
`readOnly`	`boolean \| undefined`	`false`	Verhindert Änderungen des Werts.
`loading`	`boolean \| undefined`	`false`	Zeigt den Ladezustand.
`locale`	`string \| undefined`	`de-DE`	Locale für Datums-/Zeitformatierung.
`label`	`string \| undefined`	`Terminplaner`	Beschriftung beziehungsweise zugänglicher Name.

Ereignisse

Event	Payload / Verhalten
update:dataSource	Neuer Wert von dataSource; über v-model:dataSource übernehmen (modelValue: v-model).
update:currentDate	Neuer Wert von currentDate; über v-model:currentDate übernehmen (modelValue: v-model).
update:currentView	Neuer Wert von currentView; über v-model:currentView übernehmen (modelValue: v-model).
appointmentClick	AppointmentClickEvent: appointmentData, event.
cellClick	SchedulerCellClickEvent: startDate, endDate, allDay, event.
appointmentAdding	AppointmentChangeEvent mit cancel vor Anlegen.
appointmentAdded	AppointmentEvent nach lokalem Anlegen.
appointmentUpdating	AppointmentUpdatingEvent mit oldData, newData und cancel.
appointmentUpdated	AppointmentUpdatedEvent mit oldData und newData.
appointmentDeleting	AppointmentChangeEvent mit cancel vor Löschen.
appointmentDeleted	AppointmentEvent nach lokalem Löschen.

Slots

Slot	Argumente
appointment	{ appointmentData, startDate, endDate, view }

vue

<script setup lang="ts">
import { ref } from 'vue'
import { TxScheduler, type Appointment } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const appointments = ref<Appointment[]>([{ id: 1, text: 'Meeting', startDate: new Date(2026, 9, 28, 9), endDate: new Date(2026, 9, 28, 10) }])
const calendarDate = ref(new Date(2026, 9, 28))
</script>

<template>
  <TxScheduler v-model:data-source="appointments" v-model:current-date="calendarDate" />
</template>

TxScheduler.