Vue Scheduler

Vue Scheduler is the official Vue wrapper for DHTMLX Scheduler. It targets Vue 3 and keeps full access to the Scheduler API while adding Vue-friendly props, events, and composables.

What You Get With The Wrapper

• Declarative setup through props (events, date, view, config, templates, plugins, theme, locale, markers, views, xy, and filter.)
• Data sync for events
• Scheduler event wiring through the on<EventName> props
• Vue lifecycle entry point through @ready
• Component ref access to the underlying instance
• Typed helper factories and composables for common wrapper workflows

<script setup lang="ts">
import VueScheduler from "@dhtmlx/trial-vue-scheduler";
import "@dhtmlx/trial-vue-scheduler/dist/vue-scheduler.css";
</script>

<template>
  <div :style="{ height: 600px; }">
    <VueScheduler :events="events" />
  </div>
</template>

If you want the architecture and capability map first, read Vue Scheduler Overview.

Recommended Learning Path

Use this order if you are new to the wrapper:

1. Installation for package channel selection and imports
2. Quick Start to render your first Scheduler
3. Configuration Reference for prop and callback details
4. Data Binding and State Management Basics to choose a data ownership model
5. Pinia Integration Tutorial for a store-driven implementation
6. Customization Patterns for templates, lightbox, config and themes

Wrapper Vs Low-Level JS Integration

Pick the integration path based on how much lifecycle and sync logic you want to manage yourself.

• Use the official wrapper (@dhtmlx/trial-vue-scheduler or @dhx/vue-scheduler) for Vue props/events, wrapper-managed synchronization, and typed helper APIs.
• Use low-level JS integration only when you want direct control over instance lifecycle and manual API orchestration.

For the low-level path, use dhtmlxScheduler with Vue.js (Low-Level Integration).

Data And State Management Entry Point

Start with the state section if you already know you need store/backend synchronization:

• Data & State Management
• Data Binding and State Management Basics
• Using Vue Scheduler with Pinia

Examples and evaluation resources

Browse the public Vue Scheduler examples for runnable demos of the wrapper:

• Live demo - all wrapper features running in the browser
• GitHub repository - source for every sample referenced in the overview

Minimal starter projects (one wrapper feature each):

• vue-scheduler-quick-start - smallest possible setup, matches the Quick Start
• vue-scheduler-pinia-starter - Pinia store with batchSave and store-level undo/redo, matches the Pinia tutorial

If you're evaluating Vue Scheduler, the evaluation page provides access to technical support during the evaluation period. See Installation.