TxScheduler · Vue · tecexpress

Day, week and month calendar with appointment editing. All-day end dates are exclusive; recurrence, resources and drag-and-drop are unavailable.

Prop	Type	Default	Meaning
`dataSource`	`TxSource<Appointment> \| undefined`	`undefined`	List, configuration or DataSource instance; takes precedence over items.
`currentDate`	`SchedulerDate \| undefined`	`undefined`	Current calendar date; update a controlled value for navigation.
`currentView`	`SchedulerView \| undefined`	`undefined`	Current calendar view.
`views`	`SchedulerView[] \| undefined`	`["day","week","month"]`	Available calendar views.
`firstDayOfWeek`	`number \| undefined`	`1`	First weekday; 1 = Monday.
`startDayHour`	`number \| undefined`	`8`	First visible hour of the day.
`endDayHour`	`number \| undefined`	`18`	Last visible hour of the day.
`cellDuration`	`number \| undefined`	`30`	Calendar cell duration in minutes.
`editing`	`boolean \| SchedulerEditing \| undefined`	`true`	Permissions to create, update and delete.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.
`readOnly`	`boolean \| undefined`	`false`	Prevents value changes.
`loading`	`boolean \| undefined`	`false`	Shows the loading state.
`locale`	`string \| undefined`	`de-DE`	Locale for date/time formatting.
`label`	`string \| undefined`	`Terminplaner`	Label or accessible name.

Events

Event	Payload / behavior
update:dataSource	New dataSource value; accept using v-model:dataSource (modelValue: v-model).
update:currentDate	New currentDate value; accept using v-model:currentDate (modelValue: v-model).
update:currentView	New currentView value; accept using v-model:currentView (modelValue: v-model).
appointmentClick	AppointmentClickEvent: appointmentData, event.
cellClick	SchedulerCellClickEvent: startDate, endDate, allDay, event.
appointmentAdding	AppointmentChangeEvent with cancel before adding.
appointmentAdded	AppointmentEvent after local insertion.
appointmentUpdating	AppointmentUpdatingEvent with oldData, newData and cancel.
appointmentUpdated	AppointmentUpdatedEvent with oldData and newData.
appointmentDeleting	AppointmentChangeEvent with cancel before deleting.
appointmentDeleted	AppointmentEvent after local deletion.

Slots

Slot	Arguments
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.