> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Highlight Off-Days in the Timeline

> Visually distinguish non-working days (weekends, holidays, and personal time off) in the Nextedy GANTT timeline by shading off-day cells with a different background color.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## How Off-Day Highlighting Works

When a working calendar is active, the Gantt chart automatically applies a visual background highlight to timeline cells that fall on non-working days. These cells receive a distinct styling that makes it easy to identify when resources are unavailable.

The highlighting applies to three layers of calendar data, each progressively more specific:

| Calendar Layer               | Scope                                       | Activation                                           |
| ---------------------------- | ------------------------------------------- | ---------------------------------------------------- |
| **Global calendar off-days** | All resources, project-wide                 | Enable **Use Working Calendar** in widget properties |
| **User calendar off-days**   | Per-resource (individual working calendars) | Enable **Load User Calendars**                       |
| **Team assignment off-days** | Per-resource (team-based availability)      | Enable **Load Team Assignments**                     |

<Steps>
  <Step title="Enable the Working Calendar">
    Open the page in edit mode and select the Gantt widget. Navigate to **Widget Properties > Working Calendars** and set **Use Working Calendar** to **Yes**.

    With this setting alone, the Gantt highlights weekends and any global off-days defined in the project working calendar. These cells appear shaded in every task row and resource row.
  </Step>

  <Step title="Enable User Calendar Highlighting">
    To show per-user off-days (personal vacation, sick leave, part-time schedules), enable user calendars:

    1. In **Widget Properties > Working Calendars**, set **Load User Calendars** to **Yes**.
    2. Ensure each user has a Calendar work item in Polarion with their personal off-days configured.

    When enabled, the Gantt applies per-resource highlighting: each resource row shows that user's specific off-days in addition to the global calendar. For example, if User A has Friday off but User B works Fridays, only User A's row highlights Fridays.

    <Tip title="Base Calendar Holder">
      You can designate a specific user as the base calendar holder. That user's off-days serve as the baseline calendar, and other users' calendars overlay additional off-days on top. This is useful when a team shares a common schedule with individual exceptions.
    </Tip>
  </Step>

  <Step title="Enable Team Assignment Highlighting">
    For team-based resource management, you can also highlight days where a resource has zero team assignment hours:

    1. In **Widget Properties > Working Calendars**, set **Load Team Assignments** to **Yes** (this option appears only when both Use Working Calendar and Load User Calendars are enabled).
    2. Days where a resource has no assigned team hours are treated as unavailable and receive the off-day highlight.

    <Note title="Progressive Disclosure">
      The calendar widget parameters use progressive disclosure: **Load User Calendars** only appears when **Use Working Calendar** is enabled, and **Load Team Assignments** only appears when both previous options are enabled.
    </Note>
  </Step>

  <Step title="Customize Off-Day Appearance with CSS">
    To change the visual style of off-day cells, add a **Script block** widget to the page with custom CSS:

    ```html theme={null}
    <style>
    .gantt_task .weekend {
        background-color: #f5f5f5;
    }
    </style>
    ```

    Adjust the `background-color` value to match your project's visual standards. Lighter shades work well without obscuring task bars that span across off-days.

    <Warning title="Scale Level Matters">
      Off-day cell highlighting is most visible at day-level (D) or two-day (DD) zoom scales. At weekly (W) or monthly (M) scales, individual off-days are aggregated into larger cells and the highlighting may not appear per-day. Use a day-level scale to verify your calendar setup.
    </Warning>
  </Step>
</Steps>

## Working Calendar Sources

Off-days can come from several sources. The Gantt processes them in order of specificity:

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/umKaPvHwUHw-ZQFM/gantt/diagrams/guides/visualization/off-day-highlighting/diagram-1.svg?fit=max&auto=format&n=umKaPvHwUHw-ZQFM&q=85&s=bf39d58afee81358e6f5623968e17148" alt="diagram" style={{ maxWidth: "520px", width: "100%" }} width="520" height="520" data-path="gantt/diagrams/guides/visualization/off-day-highlighting/diagram-1.svg" />
</Frame>

## Verification

You should now see shaded cells in the Gantt timeline for non-working days. At the day-level zoom scale, weekends appear shaded by default. If you enabled user calendars, individual resource rows show that user's personal off-days as shaded cells. Grey markers in the resource view indicate days where a resource is unavailable.

## See Also

* [Load Holidays and Non-Working Days](/gantt/guides/calendars/load-holidays)
* [Load User Calendars](/gantt/guides/calendars/user-calendars)
* [Import Calendars from CSV](/gantt/guides/calendars/csv-calendar-import)
* [Configure the Time Scale](/gantt/guides/visualization/timescale)
* [Apply Custom CSS to the Gantt Widget](/gantt/guides/integration/custom-css-styling)

<LastReviewed date="2026-07-02" />