DHTMLX Vue Scheduler

Getting started | Features | License | Useful links | Follow us

DHTMLX Vue Scheduler is a Vue 3 wrapper for the DHTMLX Scheduler library.

It provides a declarative way to integrate all of DHTMLX Scheduler's rich features - such as recurring events, Units and Timeline views - directly into Vue apps. Use Vue components in templates, pass reactive props, and handle event edits through wrapper callbacks.

Important: this npm package is a trial build intended for evaluation only. For access to commercial licenses and technical support, please request an evaluation on our website: https://dhtmlx.com/docs/products/dhtmlxScheduler-for-Vuejs/download.shtml

Getting started

Install package

Professional Evaluation version:

npm install @dhtmlx/trial-vue-scheduler

And initialize:

<!-- src/components/SchedulerChart.vue -->
<script setup lang="ts">
import { ref } from "vue";
import { VueScheduler, type VueSchedulerDataConfig } from "@dhtmlx/trial-vue-scheduler";
import "@dhtmlx/trial-vue-scheduler/dist/vue-scheduler.css";

import { schedulerEvents } from "../demoData";

const events = ref(schedulerEvents);
const date = new Date("2025-08-15T00:00:00Z");

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

<template>
  <div style="height: 100%; width: 100%;">
    <VueScheduler :events="events" :date="date" view="week" :data="data" />
  </div>
</template>

<!-- src/App.vue -->
<script setup lang="ts">
import SchedulerChart from "./components/SchedulerChart.vue";
</script>

<template>
  <div style="height: 100vh; width: 100vw;">
    <SchedulerChart />
  </div>
</template>

demoData.ts is an example events dataset. Replace it with your own project data.

Requirements

• Vue 3.x or newer

Complete guides

• https://docs.dhtmlx.com/scheduler/integrations/vue/

Features

• Vue components in event boxes, lightbox, and templates
• easy customization with Vue components
• compatibility with Pinia-based state management
• TypeScript support
• 10 built-in views: Day, Week, Month, Agenda, Grid, Map, Timeline, Week Agenda, Units and Year
• recurring events
• events filtering
• 7 different skins
• online export to PDF, PNG
• 32 locales
• keyboard navigation
• resources timeline and units views

License

dhtmlxScheduler v.8.0.0-beta1 Professional

This software is covered by DHTMLX Evaluation License. Contact [email protected] to get a proprietary license. Usage without proper license is prohibited.

(c) XB Software Ltd.

Useful links

• DHTMLX Vue Scheduler product page
• DHTMLX Scheduler product page
• Official documentation
• Online samples
• Export services
• List of available integrations
• Support forum

Follow us

Read us on Medium :newspaper:

Follow us on X :bird:

Like our page on Facebook :thumbsup: