Skip to main content

durationUnit

Description​

Optional. Defines duration unit for tasks

Usage​

durationUnit: "hour" | "day";

Parameters​

  • hour - sets the task duration to the hour unit, which allows users to select date and time
  • day (default) - the task duration will be measured in days

Example​

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";
  
  const data = getData();
</script>

<template>
  <Gantt :tasks="tasks" durationUnit="hour" />
</template>
info

durationUnit change requires data reload. When dynamically changing the durationUnit (e.g., from "hour" to "day"), users must also recalculate and reload task data (start, end, and duration) to ensure correct rendering.

Example:

<script setup>
    import { getData } from "../data";
    import { Gantt } from "@svar-ui/vue-gantt";
    import { RadioButtonGroup } from "@svar-ui/vue-core";
    import { ref } from "vue";

    const { tasks: initialTasks, links: initialLinks } = getData();
    const tasks = ref(initialTasks);
    const links = ref(initialLinks);

    const options = [
    { id: "hour", label: "Hour" },
    { id: "day", label: "Day" },
    ];

    const durationUnit = ref("hour");

    const api = ref();

    function handleUnitChange({ value }) {
    // here we use api.serialize() to get serialized tasks
    const sTasks = api.value.serialize().map(task => {
        // and than we recalculate task duration
        if (task.start && task.end) {
        const ms = 1000 * 60 * 60 * (value === "day" ? 24 : 1);
        const duration = Math.floor((task.end - task.start) / ms);
        return { ...task, duration };
        }
        return task;
    });
    tasks.value = sTasks;
    durationUnit.value = value;
    }
</script>

<template>
    <div>
        <RadioButtonGroup
        :options="options"
        :value="durationUnit"
        type="inline"
        :onchange="handleUnitChange"
        />
        <Gantt
        ref="api"
        :tasks="tasks"
        :links="links"
        :durationUnit="durationUnit"
        />
    </div>
</template>

Related samples: