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:

<script>
  import { getData, simpleColumns } from "./common/data";
  import { Gantt } from "@svar-ui/svelte-gantt";

  const data = getData();

  let cellBorders = "full";

</script>

<Gantt
 {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.

<script>
    import { getData } from "../data";
    import { Gantt } from "@svar-ui/svelte-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" },
    ];

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

<Gantt
    tasks={data.tasks}
    links={data.links}
    {scales}
    {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