Skip to main content

Inclusive end dates

By default, Gantt stores the task end date as the start of the next day. For example, the end date of a task that runs from Monday to Friday is Saturday 00:00. You can change this and show the last day of work instead.

Enabling inclusive end dates​

Set the inclusiveEnd property to true. Gantt then shows the end date of the task from the description above as Friday.

The property works only with durationUnit: "day". For the "hour" unit, Gantt turns the property off.

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

const data = getData();

export default function App() {
  return <Gantt tasks={data.tasks} durationUnit="day" inclusiveEnd={true} />;
}

The property converts the dates that users read and enter. For the list of these dates, see Converted dates.

The stored task data stays the same. Gantt uses the stored dates for the chart bars, the PDF and PNG export, and the MS Project export and import.

A date entered by a user is saved one day later.

Converted dates​

The property converts all the dates that close a period of work:

  • the end of a task and the end of a task segment
  • the base_end of a baseline
  • the deadline
  • the date of a finish constraint: fnet, fnlt or mfo

Gantt shows the converted dates in these places:

  • the grid columns with the end, base_end and deadline ids: the cell text, the inline editor and the header filter
  • the Editor
  • the default tooltips for deadlines, constraint markers and S-curve points
  • the Excel export

Working days​

If inclusiveEnd is true and you use a calendar, Gantt shows end dates as the last working day of a task. For example, one task ends on Saturday 00:00 and a second task ends on Monday 00:00 after a weekend. Gantt shows Friday for both.

Limit at the task start​

Gantt never shows an end date earlier than the start of the task. For example:

  • the task has no duration. The start is Monday and the end is Monday 00:00. One day before the end is Sunday. Gantt shows Monday.
  • the task starts on Saturday, which is not a working day, and the end is Monday 00:00. The last working day before the end is Friday, which is before the start. Gantt shows Saturday.

This limit applies only to the end and the base_end: Gantt compares the end with the start, and the base_end with the base_start. A deadline and a constraint date have no related start date, so Gantt does not limit them.

Dates in custom code​

Gantt converts the dates in its own components only. A column template, a custom cell and custom tooltip content receive the stored dates, so convert end dates there yourself. Gantt does not convert a column with its own getter or setter either.

import { addDays } from "date-fns";

const columns = [
  // ...
  {
    id: "deadline",
    header: "Deadline",
    // the template gets the stored date
    template: v => (v ? addDays(v, -1).toLocaleDateString() : ""),
  },
];

If you use calendars, the built-in columns show the last working day (see Working days), so a date shifted by one day can differ from them.

Related sample:

Related articles: