Quick Start with Vue Scheduler

노트

This tutorial covers the Vue wrapper included in the Commercial, Enterprise, and Ultimate editions of DHTMLX Scheduler. If you are using the Individual or GPL edition, follow the alternative guide: How to Start with Vue.

The Vue Scheduler component is the official wrapper for DHTMLX Scheduler. This guide walks you through creating a small Vue 3 + Vite application and rendering a basic Scheduler using the trial package.

If you're new to Vue, start with the official Vue documentation.

Check a complete working project that follows this tutorial on GitHub.

Prerequisites

• Node.js installed
• npm or Yarn
• Vue 3 project (this page shows how to create one with Vite)
• Vue Scheduler package access (evaluation or professional)

1. Create A Vue 3 Project

Create a project with the official Vue scaffolding tool:

npm create vite@latest vue-scheduler-quick-start -- --template vue-ts
cd vue-scheduler-quick-start
npm install

If you prefer Yarn, replace the install step with yarn.

2. Install Vue Scheduler

Install Vue Scheduler as described in the Vue Scheduler installation guide.

In this tutorial we use the evaluation package:

For evaluation:

npm install @dhtmlx/trial-vue-scheduler

or

yarn add @dhtmlx/trial-vue-scheduler

The examples below use the evaluation package. If you installed the professional package, replace imports with @dhx/vue-scheduler.

3. Add Demo Data

Create src/demoData.ts:

src/demoData.ts

import type { Event } from "@dhtmlx/trial-vue-scheduler";

export const mainDate = new Date("2026-08-15T00:00:00Z");

export const schedulerEvents: Event[] = [
  { id: 1, start_date: new Date("2026-08-10T02:00:00Z"), end_date: new Date("2026-08-10T10:20:00Z"), text: "Product Strategy Hike" },
  { id: 2, start_date: new Date("2026-08-10T12:00:00Z"), end_date: new Date("2026-08-10T16:00:00Z"), text: "Agile Meditation and Release" },
  { id: 3, start_date: new Date("2026-08-11T06:00:00Z"), end_date: new Date("2026-08-11T11:00:00Z"), text: "Tranquil Tea Time" },
  { id: 4, start_date: new Date("2026-08-11T11:30:00Z"), end_date: new Date("2026-08-11T19:00:00Z"), text: "Sprint Review and Retreat" },
  { id: 5, start_date: new Date("2026-08-12T01:00:00Z"), end_date: new Date("2026-08-12T03:00:00Z"), text: "Kayaking Workshop" },
  { id: 6, start_date: new Date("2026-08-12T06:00:00Z"), end_date: new Date("2026-08-12T08:00:00Z"), text: "Stakeholder Sunset Yoga Session" },
  { id: 7, start_date: new Date("2026-08-12T07:00:00Z"), end_date: new Date("2026-08-12T12:00:00Z"), text: "Roadmap Alignment Walk" },
  { id: 8, start_date: new Date("2026-08-12T13:00:00Z"), end_date: new Date("2026-08-12T18:00:00Z"), text: "Mindful Team Building" },
  { id: 9, start_date: new Date("2026-08-13T01:00:00Z"), end_date: new Date("2026-08-13T18:00:00Z"), text: "Cross-Functional Expedition" },
  { id: 10, start_date: new Date("2026-08-13T14:00:00Z"), end_date: new Date("2026-08-13T20:00:00Z"), text: "User Feedback Picnic" },
  { id: 11, start_date: new Date("2026-08-14T03:00:00Z"), end_date: new Date("2026-08-14T08:00:00Z"), text: "Demo and Showcase" },
  { id: 12, start_date: new Date("2026-08-14T11:00:00Z"), end_date: new Date("2026-08-14T17:00:00Z"), text: "Quality Assurance Spa Day" },
  { id: 13, start_date: new Date("2026-08-15T01:00:00Z"), end_date: new Date("2026-08-15T03:00:00Z"), text: "Motion Cycling Adventure" },
  { id: 14, start_date: new Date("2026-08-15T10:00:00Z"), end_date: new Date("2026-08-15T16:00:00Z"), text: "Competitor Analysis Beach Day" },
  { id: 15, start_date: new Date("2026-08-16T02:00:00Z"), end_date: new Date("2026-08-16T06:00:00Z"), text: "Creativity Painting Retreat" },
];

4. Create A Scheduler Component

Create src/components/Scheduler.vue:

src/components/Scheduler.vue

<script setup lang="ts">
import { ref } from "vue";
import {
  VueScheduler,
  type Event,
  type SchedulerConfig,
  type VueSchedulerDataConfig,
} from "@dhtmlx/trial-vue-scheduler";
import "@dhtmlx/trial-vue-scheduler/dist/vue-scheduler.css";
import { mainDate, schedulerEvents } from "../demoData";

const events = ref<Event[]>(schedulerEvents);

const config: SchedulerConfig = {
  first_hour: 6,
  last_hour: 22,
};

const data: VueSchedulerDataConfig = {
  save: (entity, action, item, id) => {
    console.log("[data.save]", entity, action, item, id);
  },
};
</script>

<template>
  <div :style="{ height: '100vh', width: '100vw' }">
    <VueScheduler :events="events" :date="mainDate" view="week" :config="config" :data="data" />
  </div>
</template>

If you use the professional package, replace both imports:

• @dhtmlx/trial-vue-scheduler -> @dhx/vue-scheduler
• @dhtmlx/trial-vue-scheduler/dist/vue-scheduler.css -> @dhx/vue-scheduler/dist/vue-scheduler.css

5. Render Scheduler In The App Shell

Replace the default content in src/App.vue:

src/App.vue

<script setup lang="ts">
import Scheduler from "./components/Scheduler.vue";
</script>

<template>
  <Scheduler />
</template>

6. Start The App

Run the dev server:

npm run dev

Open the local URL printed by Vite. You should see Scheduler rendered in week view with the demo events.

7. (Optional) Replace Logging With Local Save Handling

Use this when you want Vue state to stay in sync with scheduler edits before adding a backend or store. Update src/components/Scheduler.vue.

const data: VueSchedulerDataConfig = {
  save: (entity, action, item, id) => {
    if (entity !== "event") return;

    if (action === "create") {
      events.value = [...events.value, item as Event];
      return;
    }

    if (action === "update") {
      events.value = events.value.map(event => (event.id === id ? { ...(item as Event) } : event));
      return;
    }

    if (action === "delete") {
      events.value = events.value.filter(event => event.id !== id);
    }
  }
};

Result

You now have a Vue 3 app rendering the official Vue Scheduler wrapper with:

• reactive events props
• data.save callback wiring for user edits

GitHub demo repository

A complete working project that follows this tutorial is provided on GitHub.

What To Read Next

• Configuration Reference
• Data Binding and State Management Basics
• Customization Patterns