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: string | (start:Date, end:Date) => string;
    css?: string | (start: Date) => string;
  },
  {...}
];

Parameters​

  • unit - (required) scale unit ("hour" | "day" | "week" | "month" | "quarter" | "year")
  • step - (required) number of units per cell
  • format - (required) defines the format for each scale unit; it can be defined as a string of the format supported by date-fns and as a function for custom formatting. The function receives two parameters: the unit start and end dates. It should return the string with the formatted date.
  • 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​

<script>
    import { getData } from "../data";
    import { Gantt } from "@wx/svelte-gantt";

    export let skinSettings;

    const data = getData();

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

   const complexScales = [
    { unit: "year", step: 1, format: "yyyy" },
    { unit: "month", step: 2, format: "MMMM yyy" },
    { unit: "week", step: 1, format: "w" },
    { unit: "day", step: 1, format: "d", css: dayStyle },
];
</script>

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