Skip to main content

scales

Description​

Defines the timescale of Gantt

An array of objects containing the timescales data

Usage​

scales?: {
  unit: string,
  step: number,
  format?: (date: Date, next?: Date) => string | string,
  css?: (date: Date) => string
}[];

Parameters​

  • unit - (required) scale unit ("minute" |"hour" | "day" | "week" | "month" | "quarter" | "year") or a custom one
  • step - (required) number of units per cell
  • format - (optional) defines the format for each scale unit. The format can be provided as:
    • a string, using the Date and time format specification
    • or a function which receives two arguments - the start (date) and end (next) of the unit - and returns a formatted string
  • css - (optional) css class for scales; it can be a string with the css class name or function; as a function it receives the date and should return the string with the css class name

Example​

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

export default function App() {
  const data = getData();

  const dayStyle = (a) => {
    const day = a.getDay() === 5 || a.getDay() === 6;
    return day ? "sday" : "";
  };

  const complexScales = [
    { unit: "year", step: 1, format: "%Y" },
    { unit: "month", step: 2, format: "%F %Y" },
    { unit: "week", step: 1, format: "%w" },
    { unit: "day", step: 1, format: "%j", css: dayStyle },
  ];

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={complexScales}
      start={new Date(2020, 2, 1)}
      end={new Date(2020, 3, 12)}
      cellWidth={60}
    />
  );
}

Related articles: