Custom form

Replace the default task editor with a custom Vue lightbox component using batched task updates.

Demo.vue
CustomLightbox.vue
shared/projectData.ts
shared/useDemoBatchState.ts

src/examples/custom-form/Demo.vue View on GitHub

<script setup lang="ts">
import { VueGantt } from "@dhtmlx/trial-vue-gantt";
import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";

import { createProjectData } from "../shared/projectData";
import { useDemoBatchState } from "../shared/useDemoBatchState";
import CustomLightbox from "./CustomLightbox.vue";

const { tasks, links, data } = useDemoBatchState(createProjectData());
</script>

<template>
  <section class="demo-panel" data-cy="custom-form-demo">
    <VueGantt
      class="demo-gantt"
      :tasks="tasks"
      :links="links"
      :customLightbox="CustomLightbox"
      :data="data"
    />
  </section>
</template>

src/examples/custom-form/CustomLightbox.vue View on GitHub

<script setup lang="ts">
import { ref, watch } from "vue";

interface CustomLightboxProps {
  data?: any;
  onSave?: (updatedTask: any) => void;
  onCancel?: () => void;
  onDelete?: () => void;
}

const props = defineProps<CustomLightboxProps>();

const text = ref("");

watch(
  () => props.data,
  nextValue => {
    text.value = String(nextValue?.text ?? "");
  },
  { immediate: true }
);

const save = () => {
  props.onSave?.({ ...props.data, text: text.value });
};
</script>

<template>
  <div class="lightbox-backdrop" data-cy="custom-lightbox">
    <div class="lightbox-panel" role="dialog" aria-modal="true">
      <h3>Edit Task</h3>
      <label class="field">
        <span>Task Text</span>
        <input data-cy="custom-lightbox-text" type="text" v-model="text" />
      </label>
      <div class="actions">
        <button data-cy="custom-lightbox-save" type="button" @click="save">Save</button>
        <button data-cy="custom-lightbox-cancel" type="button" @click="props.onCancel?.()">Cancel</button>
        <button data-cy="custom-lightbox-delete" type="button" @click="props.onDelete?.()">Delete</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 27, 38, 0.45);
  z-index: 1000;
}

.lightbox-panel {
  width: min(420px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid #cfd8e2;
  border-radius: 8px;
  padding: 14px;
}

h3 {
  margin: 0 0 12px;
}

.field {
  display: block;
}

.field span {
  display: inline-block;
  font-size: 12px;
  margin-bottom: 4px;
  color: #455a6f;
}

.field input {
  width: 100%;
  border: 1px solid #cfd8e2;
  padding: 8px;
  font-size: 14px;
}

.actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.actions button {
  border: 1px solid #cfd8e2;
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
}

.actions button:hover {
  border-color: #91abd0;
}
</style>

src/examples/shared/projectData.ts View on GitHub

import type { Link, Task } from "@dhtmlx/trial-vue-gantt";

const baseTasks: Task[] = [
  { id: 1, text: "Office itinerancy", type: "project", start_date: new Date(2026, 6, 2), duration: 17, progress: 0.4, parent: 0, open: true },
  { id: 2, text: "Office facing", type: "project", start_date: new Date(2026, 6, 2), duration: 8, progress: 0.6, parent: 1, open: true },
  { id: 3, text: "Furniture installation", type: "project", start_date: new Date(2026, 6, 11), duration: 8, progress: 0.6, parent: 1, open: true },
  { id: 4, text: "The employee relocation", type: "project", start_date: new Date(2026, 6, 13), duration: 5, progress: 0.5, parent: 1, priority: 3, open: true },
  { id: 5, text: "Interior office", type: "task", start_date: new Date(2026, 6, 3), duration: 7, progress: 0.6, parent: 2, priority: 1 },
  { id: 6, text: "Air conditioners check", type: "task", start_date: new Date(2026, 6, 3), duration: 7, progress: 0.6, parent: 2, priority: 2 },
  { id: 7, text: "Workplaces preparation", type: "task", start_date: new Date(2026, 6, 12), duration: 8, progress: 0.6, parent: 3 },
  { id: 8, text: "Preparing workplaces", type: "task", start_date: new Date(2026, 6, 14), duration: 5, progress: 0.5, parent: 4, priority: 1 },
  { id: 9, text: "Workplaces importation", type: "task", start_date: new Date(2026, 6, 21), duration: 4, progress: 0.5, parent: 4 },
  { id: 10, text: "Workplaces exportation", type: "task", start_date: new Date(2026, 6, 27), duration: 3, progress: 0.5, parent: 4, priority: 2 },
  { id: 11, text: "Product launch", type: "project", start_date: new Date(2026, 6, 2), duration: 13, progress: 0.6, parent: 0, open: true },
  { id: 12, text: "Perform Initial testing", type: "task", start_date: new Date(2026, 6, 3), duration: 5, progress: 1, parent: 11 },
  { id: 13, text: "Development", type: "project", start_date: new Date(2026, 6, 3), duration: 11, progress: 0.5, parent: 11, open: true },
  { id: 14, text: "Analysis", type: "task", start_date: new Date(2026, 6, 3), duration: 6, progress: 0.8, parent: 11 },
  { id: 15, text: "Design", type: "project", start_date: new Date(2026, 6, 3), duration: 5, progress: 0.2, parent: 11, open: true },
  { id: 16, text: "Documentation creation", type: "task", start_date: new Date(2026, 6, 3), duration: 7, progress: 0, parent: 11, priority: 1 },
  { id: 17, text: "Develop System", type: "task", start_date: new Date(2026, 6, 3), duration: 2, progress: 1, parent: 13, priority: 2 },
  { id: 25, text: "Beta Release", type: "milestone", start_date: new Date(2026, 6, 6), duration: 0, progress: 0, parent: 13 },
  { id: 18, text: "Integrate System", type: "task", start_date: new Date(2026, 6, 10), duration: 2, progress: 0.8, parent: 13, priority: 3 },
  { id: 19, text: "Test", type: "task", start_date: new Date(2026, 6, 13), duration: 4, progress: 0.2, parent: 13 },
  { id: 20, text: "Marketing", type: "task", start_date: new Date(2026, 6, 13), duration: 4, progress: 0, parent: 13, priority: 1 },
  { id: 21, text: "Design database", type: "task", start_date: new Date(2026, 6, 3), duration: 4, progress: 0.5, parent: 15 },
  { id: 22, text: "Software design", type: "task", start_date: new Date(2026, 6, 3), duration: 4, progress: 0.1, parent: 15, priority: 1 },
  { id: 23, text: "Interface setup", type: "task", start_date: new Date(2026, 6, 3), duration: 5, progress: 0, parent: 15, priority: 1 },
  { id: 24, text: "Release v1.0", type: "milestone", start_date: new Date(2026, 6, 18), duration: 0, progress: 0, parent: 11 }
];

const baseLinks: Link[] = [
  { id: 2, source: 2, target: 3, type: "0" },
  { id: 3, source: 3, target: 4, type: "0" },
  { id: 7, source: 8, target: 9, type: "0" },
  { id: 8, source: 9, target: 10, type: "0" },
  { id: 16, source: 17, target: 25, type: "0" },
  { id: 17, source: 18, target: 19, type: "0" },
  { id: 18, source: 19, target: 20, type: "0" },
  { id: 22, source: 13, target: 24, type: "0" },
  { id: 23, source: 25, target: 18, type: "0" }
];

const cloneDate = (value: Date | undefined): Date | undefined => {
  if (value instanceof Date) {
    return new Date(value.getTime());
  }
  return value;
};

const cloneTask = (task: Task): Task => {
  const next: Task = { ...task };
  next.start_date = cloneDate(task.start_date);
  next.end_date = cloneDate(task.end_date);
  return next;
};

const cloneLink = (link: Link): Link => ({ ...link });

export function createProjectData() {
  return {
    tasks: baseTasks.map(cloneTask),
    links: baseLinks.map(cloneLink)
  };
}

src/examples/shared/useDemoBatchState.ts View on GitHub

import { ref } from "vue";
import type { BatchChanges, Link, Task } from "@dhtmlx/trial-vue-gantt";
import { applyBatchChanges } from "./applyBatchChanges";

export interface DemoDataSet {
  tasks: Task[];
  links: Link[];
}

export function createBatchSaveData(applyBatch: (changes: BatchChanges) => void) {
  return {
    batchSave: applyBatch
  };
}

export function useDemoBatchState(initialData: DemoDataSet) {
  const tasks = ref<Task[]>(initialData.tasks);
  const links = ref<Link[]>(initialData.links);

  const applyBatch = (changes: BatchChanges) => {
    const next = applyBatchChanges(tasks.value, links.value, changes);
    tasks.value = next.tasks;
    links.value = next.links;
  };

  return {
    tasks,
    links,
    applyBatch,
    data: createBatchSaveData(applyBatch)
  };
}