Styles

Adding cell borders

To show all lines in the grid (horizontal and vertical), set the borders value of the cellBorders to "full". To hide horizontal lines, set the value to "columns". If you set it to "", lines will be hidden.

Example:

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

const data = getData();

const cellBorders = "full";

export default function App() {
  return (
    <Gantt
      cellBorders={cellBorders}
      tasks={data.tasks} />
  );
}

Related sample: Chart cell borders

Highlighting holidays

Use the highlightTime property to highlight specific time areas in the chart, such as weekends or off-hours. The function takes a date and unit ("day" or "hour") as input and returns a CSS class to apply to matching cells. You can use the built-in "wx-weekend" class or provide a custom one (see Styling).

When zoom is enabled, highlighting responds dynamically: as users zoom in from day-level to hour-level, the hour-based highlighting activates automatically.

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

const data = getData();

const scales = [
    { unit: "year", step: 1, format: "%Y" },
    { unit: "month", step: 2, format: "%F %Y" },
    { unit: "week", step: 1, format: "Week %W" },
    { unit: "day", step: 1, format: "%j, %l" },
];

const isDayOff = (date) => {
    const d = date.getDay();
    return d == 0 || d == 6;
};
const isHourOff = (date) => {
    const h = date.getHours();
    return h < 8 || h == 12 || h > 17;
};
const highlightTime = (d, u) => {
    if (u == "day" && isDayOff(d)) return "wx-weekend";
    if (u == "hour" && (isDayOff(d) || isHourOff(d))) return "wx-weekend";
    return "";
};

export default function App() {
  return (
    <Gantt
        tasks={data.tasks}
        links={data.links}
        scales={scales}
        highlightTime={highlightTime}
        zoom />
  );
}

To change the default holiday colors, redefine the CSS variables:

--wx-gantt-holiday-background: #f0f6fa;
--wx-gantt-holiday-color: #9fa1ae;

Related sample: Holidays