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​

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

function App() {
  return <Gantt tasks={data.tasks} durationUnit="hour" />;
}

export default App;
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:

import { useState } from "react";
import { getData } from "../data";
import { Gantt } from "@svar-ui/react-gantt";
import { RadioButtonGroup } from "@svar-ui/react-core";

function App() {
  const [data, setData] = useState(getData());
  const [durationUnit, setDurationUnit] = useState("hour");
  const [api, setApi] = useState(null);

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

  function handleUnitChange({ value }) {
    // here we use api.serialize() to get serialized tasks
    const sTasks = api.serialize().map(task => {
      // and then 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;
    });
    setData({ ...data, tasks: sTasks });
    setDurationUnit(value);
  }

  return (
    <div>
      <RadioButtonGroup
        options={options}
        value={durationUnit}
        type="inline"
        onChange={handleUnitChange}
      />
      <Gantt
        init={setApi}
        tasks={data.tasks}
        links={data.links}
        durationUnit={durationUnit}
      />
    </div>
  );
}

export default App;

Related samples: