Skip to main content

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 LayerScopeActivation
Global calendar off-daysAll resources, project-wideEnable Use Working Calendar in widget properties
User calendar off-daysPer-resource (individual working calendars)Enable Load User Calendars
Team assignment off-daysPer-resource (team-based availability)Enable Load Team Assignments

Step 1: 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 2: 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.
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.

Step 3: 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.
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.

Step 4: 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:
<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.
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.

Working Calendar Sources

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

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

KB ArticlesSupport TicketsSource Code
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/working-calendars/ganttOffDaysCellBackground.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt/src/com/nextedy/polarion/gantt/widget/GanttWidgetConfig.java
  • prod-gantt-src/com.nextedy.polarion.gantt/src/com/nextedy/polarion/gantt/model/Marker.java
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/config.js
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/working-calendars/csv-calendar.cy.ts