Calendar and Working Days

ApexGantt's working calendar affects how duration math, summary aggregation, and timeline stripes handle non-working time. Without a calendar option, every day is treated as a working day.

Basic setup

Set which weekdays count as working days and which dates are holidays:

const gantt = new ApexGantt(document.getElementById('chart'), {
  series: tasks,
  calendar: {
    workingWeekdays: [1, 2, 3, 4, 5],   // Mon–Fri (0 = Sunday)
    holidays: [
      '2024-01-01',   // New Year's Day
      '2024-12-25',   // Christmas
    ],
  },
})

CalendarOptions reference

Option	Type	Default	Description
workingWeekdays	number[]	[1,2,3,4,5]	Weekdays that count as working (0 = Sunday, 6 = Saturday)
holidays	HolidayEntry[]	[]	Specific non-working dates, regardless of weekday
showNonWorkingStripes	boolean	true	Render hatched bands over non-working timeline columns
holidayTooltip	(ctx) => string	—	HTML string rendered when hovering a holiday stripe
dragSnapMode	'next' | 'previous' | 'allow'	'next'	What happens when drag/resize lands on a non-working day

HolidayEntry formats

Each holiday can be a plain string, a Date object, or an object with a date and a label for the hover tooltip:

const gantt = new ApexGantt(el, {
  series: tasks,
  calendar: {
    workingWeekdays: [1, 2, 3, 4, 5],
    holidays: [
      '2024-01-01',                              // plain string
      new Date('2024-07-04'),                    // Date object
      { date: '2024-12-25', label: 'Christmas' }, // labeled — appears in tooltip
    ],
  },
})

Non-working stripes

When showNonWorkingStripes: true (the default), weekends and holidays are overlaid with a hatched band in the timeline. Disable them when you want the calendar to drive duration math only without the visual overlay:

calendar: {
  workingWeekdays: [1, 2, 3, 4, 5],
  showNonWorkingStripes: false,   // no visual bands, calendar still drives duration
},

Holiday hover tooltip

Supply a holidayTooltip function to control the HTML rendered when a user hovers a holiday stripe. The function receives { date: Date, label?: string }:

calendar: {
  workingWeekdays: [1, 2, 3, 4, 5],
  holidays: [
    { date: '2024-12-25', label: 'Christmas Day' },
    { date: '2024-01-01', label: "New Year's Day" },
  ],
  holidayTooltip: ({ date, label }) => `
    <div style="padding: 6px 10px; font-size: 13px;">
      <strong>${label ?? 'Non-working day'}</strong><br/>
      ${date.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })}
    </div>
  `,
},

Drag snap mode

When a task bar is dragged or resized to land on a non-working day, dragSnapMode determines where it snaps:

• 'next' (default): snaps forward to the next working day. Drag preserves the task's working-day duration.
• 'previous': snaps backward to the previous working day.
• 'allow': permits non-working start/end dates — useful for tasks that can span weekends.

calendar: {
  workingWeekdays: [1, 2, 3, 4, 5],
  dragSnapMode: 'next',   // default: drag always lands on a working day
},

Six-day working week

If your team works Saturday but not Sunday:

calendar: {
  workingWeekdays: [1, 2, 3, 4, 5, 6],   // Mon–Sat
},

Updating the calendar at runtime

Call update() to change the calendar after mount — for example, to switch between fiscal calendars:

gantt.update({
  calendar: {
    workingWeekdays: [0, 1, 2, 3, 4],   // switch to Sun–Thu (Middle East pattern)
    holidays: newHolidayList,
  },
})

React example

import { ApexGanttChart } from 'react-apexgantt'
import type { GanttUserOptions } from 'react-apexgantt'

const options: Omit<GanttUserOptions, 'series'> = {
  calendar: {
    workingWeekdays: [1, 2, 3, 4, 5],
    holidays: [
      '2024-01-01',
      '2024-07-04',
      { date: '2024-12-25', label: 'Christmas Day' },
    ],
    showNonWorkingStripes: true,
    dragSnapMode: 'next',
    holidayTooltip: ({ label, date }) =>
      `<div style="padding:6px 10px"><strong>${label ?? date.toDateString()}</strong></div>`,
  },
}

export default function CalendarGantt() {
  return <ApexGanttChart tasks={tasks} options={options} height="500px" />
}

Vue example

<template>
  <ApexGanttChart :tasks="tasks" :options="ganttOptions" height="500px" />
</template>

<script setup lang="ts">
import type { GanttUserOptions } from 'vue-apexgantt'

const ganttOptions: Partial<GanttUserOptions> = {
  calendar: {
    workingWeekdays: [1, 2, 3, 4, 5],
    holidays: [
      '2024-01-01',
      { date: '2024-12-25', label: 'Christmas Day' },
    ],
    showNonWorkingStripes: true,
    dragSnapMode: 'next',
  },
}
</script>