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>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/svelte-gantt";
  
  const data = getData();
  
  </script>

<Gantt {tasks} durationUnit="hour" />
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>
    import { getData } from "../data";
    import { Gantt } from "@svar-ui/svelte-gantt";
    import { RadioButtonGroup } from "@svar-ui/svelte-core";

    let { tasks, links } = $state(getData());

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

    let durationUnit = $state("hour");

    let api = $state();

    function handleUnitChange({ value }) {
    // here we use api.serialize() to get serialized tasks
    const sTasks = api.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 = sTasks;
    durationUnit = value;
    }
</script>

<div>
    <RadioButtonGroup
    {options}
    value={durationUnit}
    type="inline"
    onchange={handleUnitChange}
    />
    <Gantt
    bind:this={api}
    {tasks}
    {links}
    {durationUnit}
    />
</div>

Related samples: