@levelcaptech/gantt-task-react-custom 0.4.1 → 0.4.2

package/README.md

@@ -18,6 +18,10 @@ https://github.com/MaTeMaTuK/gantt-task-react
 npm install @levelcaptech/gantt-task-react-custom
 ```
 
+## 関連リンク
+
+- npm: https://www.npmjs.com/package/@levelcaptech/gantt-task-react-custom
+
 ## Requirements
 
 - React: 18.x（必須）
@@ -31,7 +35,7 @@ VS Code Dev Containers で npmjs.com への publish を行う環境を用意し
 
 ## 使い方
 
-```javascript
+```typescript
 import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from '@levelcaptech/gantt-task-react-custom';
 import "@levelcaptech/gantt-task-react-custom/dist/index.css";
 
@@ -53,7 +57,7 @@ let tasks: Task[] = [
 
 次のアクションを処理できます
 
-```javascript
+```typescript
 <Gantt
   tasks={tasks}
   viewMode={view}
@@ -107,13 +111,64 @@ npm start
 
 ### DisplayOption
 
-| パラメーター名 | 型      | 説明                                                                                                         |
-| :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
-| viewMode       | enum    | 時間スケールを指定します。Hour, Quarter Day, Half Day, Day, Week(ISO-8601 で 1 日目は月曜), Month, QuarterYear, Year。 |
-| viewDate       | date    | 表示に使用する日時を指定します。                                                                            |
-| preStepsCount  | number  | 最初のタスクの前の空白を指定します。                                                                         |
-| locale         | string  | 月名の言語を指定します。利用可能な形式: ISO 639-2, Java Locale。                                              |
-| rtl            | boolean | rtl モードを設定します。                                                                                    |
+| パラメーター名 | 型                              | 説明                                                                                                         |
+| :------------- | :------------------------------ | :---------------------------------------------------------------------------------------------------------- |
+| viewMode       | enum                            | 時間スケールを指定します。Hour, Quarter Day, Half Day, Day, Week(ISO-8601 で 1 日目は月曜), Month, QuarterYear, Year。 |
+| viewDate       | date                            | 表示に使用する日時を指定します。                                                                            |
+| preStepsCount  | number                          | 最初のタスクの前の空白を指定します。                                                                         |
+| locale         | string                          | 月名の言語を指定します。利用可能な形式: ISO 639-2, Java Locale。                                              |
+| rtl            | boolean                         | rtl モードを設定します。                                                                                    |
+| calendar       | [CalendarConfig](#calendarconfig) | 稼働日計算と日付表示のカレンダー設定を指定します。未指定の場合は従来の動作を維持します（オプトイン式）。        |
+
+### CalendarConfig
+
+日本カレンダー標準対応およびカスタム稼働日設定を提供します。`calendar` プロパティに設定を渡すことで有効化されます（オプトイン式）。
+
+| パラメーター名            | 型       | デフォルト値            | 説明                                                                                           |
+| :----------------------- | :------- | :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
+| locale                   | string   | `"ja"`                 | 日付フォーマットのロケール。日本語の場合は `"ja"` を指定します。                                                                       |
+| dateFormat               | string   | `"MM/dd(EEE)"`         | 日付フォーマット識別子（レガシーフィールド）。現在はレンダリング上は `"MM/dd(EEE)"` 固定で、この値を変更しても表示は変わりません。将来拡張用です。 |
+| enableJPHoliday          | boolean  | `true`                 | 日本の祝日を非稼働日として扱うかどうか。`true` で有効化されます。                                                                      |
+| highlightNonWorkingDays  | boolean  | `true`                 | 非稼働日をグレー背景でハイライト表示するかどうか。                                                                                    |
+| workOnSaturday           | boolean  | `false`                | 土曜日を稼働日として扱うかどうか。`true` にすると土曜日も稼働日になります。                                                            |
+| extraHolidays            | string[] | `[]`                   | 独自の休業日を日付文字列の配列で指定します。`YYYY-MM-DD` 形式に加えて `YYYY-M-D` のようなゼロパディング無しも受け入れ、内部で正規化されます。    |
+| extraWorkingDays         | string[] | `[]`                   | 特別稼働日を日付文字列の配列で指定します。`YYYY-MM-DD` 形式に加えて `YYYY-M-D` のようなゼロパディング無しも受け入れ、内部で正規化されます。週末・祝日・`extraHolidays` より優先されます。 |
+
+#### 使用例
+
+```typescript
+import { Gantt } from '@levelcaptech/gantt-task-react-custom';
+import type { CalendarConfig } from '@levelcaptech/gantt-task-react-custom';
+
+const calendarConfig: CalendarConfig = {
+  locale: "ja",
+  enableJPHoliday: true,
+  highlightNonWorkingDays: true,
+  workOnSaturday: false,
+  extraHolidays: ["2024-12-30", "2024-12-31"], // 年末特別休業
+  extraWorkingDays: ["2024-01-08"], // 祝日（成人の日）だが特別稼働日
+};
+
+<Gantt
+  tasks={tasks}
+  calendar={calendarConfig}
+  locale="ja-JP"
+/>
+```
+
+#### 稼働日判定の優先順位
+
+1. **最優先**: `extraWorkingDays` - 指定された日付は必ず稼働日になります
+2. **次**: `extraHolidays` - 指定された日付は非稼働日になります
+3. **標準**: 週末（日曜日、`workOnSaturday` が `false` の場合は土曜日も）と日本の祝日（`enableJPHoliday` が `true` の場合）
+
+#### 注意事項
+
+- `calendar` プロパティを指定しない場合、カレンダー機能は無効化され、従来の動作を維持します（後方互換性）。
+- 日本の祝日データは 2024-2026 年分がライブラリに静的に含まれています。
+- 無効な ISO 日付文字列は無視され、例外は投げられません。
+- 日付表示は `Intl.DateTimeFormat` を使用して `MM/dd(曜)` 形式で表示されます（日本語ロケール時）。
+
 
 ### StylingOption
 

package/dist/components/calendar/calendar.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { ViewMode } from "../../types/public-types";
+import { NormalizedCalendarConfig } from "../../helpers/calendar-helper";
 import { DateSetup } from "../../types/date-setup";
 export declare type CalendarProps = {
     dateSetup: DateSetup;
@@ -10,5 +11,6 @@ export declare type CalendarProps = {
     columnWidth: number;
     fontFamily: string;
     fontSize: string;
+    calendarConfig?: NormalizedCalendarConfig;
 };
 export declare const Calendar: React.FC<CalendarProps>;

package/dist/components/grid/grid-body.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { Task } from "../../types/public-types";
+import { NormalizedCalendarConfig } from "../../helpers/calendar-helper";
 export declare type GridBodyProps = {
     tasks: Task[];
     dates: Date[];
@@ -8,5 +9,6 @@ export declare type GridBodyProps = {
     columnWidth: number;
     todayColor: string;
     rtl: boolean;
+    calendarConfig?: NormalizedCalendarConfig;
 };
 export declare const GridBody: React.FC<GridBodyProps>;

package/dist/helpers/calendar-helper.d.ts

@@ -0,0 +1,38 @@
+import { CalendarConfig } from "../types/public-types";
+/**
+ * Normalized calendar configuration with default values
+ */
+export interface NormalizedCalendarConfig {
+    locale: string;
+    dateFormat: string;
+    enableJPHoliday: boolean;
+    highlightNonWorkingDays: boolean;
+    workOnSaturday: boolean;
+    extraHolidays: Set<string>;
+    extraWorkingDays: Set<string>;
+}
+/**
+ * Normalize and validate calendar configuration
+ */
+export declare const normalizeCalendarConfig: (config: CalendarConfig) => NormalizedCalendarConfig;
+/**
+ * Normalize ISO date string (YYYY-MM-DD) to valid date
+ * Returns canonical YYYY-MM-DD format or null if invalid
+ */
+export declare const normalizeISODate: (dateStr: string) => string | null;
+/**
+ * Convert Date to ISO date string (YYYY-MM-DD)
+ */
+export declare const toISODateString: (date: Date) => string;
+/**
+ * Check if a date is a working day according to calendar configuration
+ */
+export declare const isWorkingDay: (date: Date, config: NormalizedCalendarConfig) => boolean;
+/**
+ * Count working days between two dates (inclusive)
+ */
+export declare const countWorkingDays: (startDate: Date, endDate: Date, config: NormalizedCalendarConfig) => number;
+/**
+ * Format date in MM/dd(曜) format using Intl.DateTimeFormat
+ */
+export declare const formatJapaneseDate: (date: Date) => string;

package/dist/helpers/jp-holidays.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Japanese national holidays data
+ * Format: YYYY-MM-DD
+ * This data should be updated periodically with new releases
+ */
+export declare const JP_HOLIDAYS: Record<number, string[]>;
+/**
+ * Get all Japanese holidays as a Set for fast lookup
+ */
+export declare const getJPHolidaySet: () => Set<string>;
+/**
+ * Cached Japanese holidays set for performance
+ */
+export declare const JP_HOLIDAYS_SET: Set<string>;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { Gantt } from "./components/gantt/gantt";
 export { ViewMode } from "./types/public-types";
-export type { GanttProps, Task, StylingOption, DisplayOption, EventOption, EffortUnit, VisibleField, TaskProcess, TaskStatus, } from "./types/public-types";
+export type { GanttProps, Task, StylingOption, DisplayOption, EventOption, EffortUnit, VisibleField, TaskProcess, TaskStatus, CalendarConfig, } from "./types/public-types";
 export { TASK_PROCESS_OPTIONS, TASK_STATUS_OPTIONS, TASK_STATUS_BADGE_TEXT, TASK_STATUS_COLORS, } from "./constants/taskOptions";
 export { formatDate, parseDateFromInput, formatEffort, sanitizeEffortInput, normalizeProcess, normalizeStatus, resolveVisibleFields, getStatusColor, getStatusBadgeText, DEFAULT_VISIBLE_FIELDS, } from "./helpers/task-helper";

package/dist/index.js

@@ -1788,6 +1788,157 @@ var VerticalScroll = function VerticalScroll(_ref) {
   }));
 };
 
+var JP_HOLIDAYS = {
+  2024: ["2024-01-01", "2024-01-08", "2024-02-11", "2024-02-12", "2024-02-23", "2024-03-20", "2024-04-29", "2024-05-03", "2024-05-04", "2024-05-05", "2024-05-06", "2024-07-15", "2024-08-11", "2024-08-12", "2024-09-16", "2024-09-22", "2024-09-23", "2024-10-14", "2024-11-03", "2024-11-04", "2024-11-23"],
+  2025: ["2025-01-01", "2025-01-13", "2025-02-11", "2025-02-23", "2025-02-24", "2025-03-20", "2025-04-29", "2025-05-03", "2025-05-04", "2025-05-05", "2025-05-06", "2025-07-21", "2025-08-11", "2025-09-15", "2025-09-23", "2025-10-13", "2025-11-03", "2025-11-23", "2025-11-24"],
+  2026: ["2026-01-01", "2026-01-12", "2026-02-11", "2026-02-23", "2026-03-20", "2026-04-29", "2026-05-03", "2026-05-04", "2026-05-05", "2026-05-06", "2026-07-20", "2026-08-11", "2026-09-21", "2026-09-22", "2026-10-12", "2026-11-03", "2026-11-23"]
+};
+var getJPHolidaySet = function getJPHolidaySet() {
+  var holidays = new Set();
+  Object.values(JP_HOLIDAYS).forEach(function (yearHolidays) {
+    yearHolidays.forEach(function (holiday) {
+      return holidays.add(holiday);
+    });
+  });
+  return holidays;
+};
+var JP_HOLIDAYS_SET = getJPHolidaySet();
+
+var emittedWarnings = new Set();
+var warnOnce = function warnOnce(key, message) {
+  if (!emittedWarnings.has(key) && typeof console !== "undefined") {
+    console.warn(message);
+    emittedWarnings.add(key);
+  }
+};
+var normalizeCalendarConfig = function normalizeCalendarConfig(config) {
+  var _config$locale, _config$enableJPHolid, _config$highlightNonW;
+  var rawLocale = ((_config$locale = config.locale) === null || _config$locale === void 0 ? void 0 : _config$locale.trim()) || "";
+  var locale = rawLocale || "ja";
+  var dateFormat = config.dateFormat || "MM/dd(EEE)";
+  var enableJPHoliday = (_config$enableJPHolid = config.enableJPHoliday) != null ? _config$enableJPHolid : true;
+  var highlightNonWorkingDays = (_config$highlightNonW = config.highlightNonWorkingDays) != null ? _config$highlightNonW : true;
+  var workOnSaturday = config.workOnSaturday === true;
+  var extraHolidays = new Set();
+  if (config.extraHolidays) {
+    config.extraHolidays.forEach(function (dateStr) {
+      var normalized = normalizeISODate(dateStr);
+      if (normalized) {
+        extraHolidays.add(normalized);
+      }
+    });
+  }
+  var extraWorkingDays = new Set();
+  if (config.extraWorkingDays) {
+    config.extraWorkingDays.forEach(function (dateStr) {
+      var normalized = normalizeISODate(dateStr);
+      if (normalized) {
+        extraWorkingDays.add(normalized);
+      }
+    });
+  }
+  if (!locale.toLowerCase().startsWith("ja")) {
+    var localeKey = locale.trim().toLowerCase();
+    warnOnce("gantt-calendar-locale-" + localeKey, "[Gantt Calendar] Non-Japanese locale \"" + locale + "\" specified. " + "Holiday definitions (including Japanese public holidays) are still based on the Japanese calendar.");
+  }
+  if (dateFormat !== "MM/dd(EEE)") {
+    var dateFormatKey = dateFormat.trim().toLowerCase();
+    warnOnce("gantt-calendar-dateFormat-" + dateFormatKey, "[Gantt Calendar] Custom dateFormat \"" + dateFormat + "\" specified. " + "Note: dateFormat is currently a legacy field and does not affect date rendering. " + "The format \"MM/dd(EEE)\" is used internally regardless of this setting.");
+  }
+  return {
+    locale: locale,
+    dateFormat: dateFormat,
+    enableJPHoliday: enableJPHoliday,
+    highlightNonWorkingDays: highlightNonWorkingDays,
+    workOnSaturday: workOnSaturday,
+    extraHolidays: extraHolidays,
+    extraWorkingDays: extraWorkingDays
+  };
+};
+var normalizeISODate = function normalizeISODate(dateStr) {
+  try {
+    var trimmed = dateStr.trim();
+    if (!/^\d{4}-\d{1,2}-\d{1,2}$/.test(trimmed)) {
+      return null;
+    }
+    var parts = trimmed.split("-");
+    if (parts.length !== 3) return null;
+    var year = Number(parts[0]);
+    var month = Number(parts[1]);
+    var day = Number(parts[2]);
+    if (isNaN(year) || isNaN(month) || isNaN(day) || month < 1 || month > 12 || day < 1 || day > 31) {
+      return null;
+    }
+    var date = new Date(year, month - 1, day);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+      return null;
+    }
+    var paddedMonth = String(month).padStart(2, "0");
+    var paddedDay = String(day).padStart(2, "0");
+    return year + "-" + paddedMonth + "-" + paddedDay;
+  } catch (e) {
+    if (typeof console !== "undefined") {
+      console.warn("[Gantt Calendar] Invalid date string: " + dateStr);
+    }
+    return null;
+  }
+};
+var toISODateString = function toISODateString(date) {
+  var year = date.getFullYear();
+  var month = String(date.getMonth() + 1).padStart(2, "0");
+  var day = String(date.getDate()).padStart(2, "0");
+  return year + "-" + month + "-" + day;
+};
+var isWorkingDay = function isWorkingDay(date, config) {
+  var dateStr = toISODateString(date);
+  if (config.extraWorkingDays.has(dateStr)) {
+    return true;
+  }
+  if (config.extraHolidays.has(dateStr)) {
+    return false;
+  }
+  var dayOfWeek = date.getDay();
+  if (dayOfWeek === 0) {
+    return false;
+  }
+  if (dayOfWeek === 6 && !config.workOnSaturday) {
+    return false;
+  }
+  if (config.enableJPHoliday) {
+    if (JP_HOLIDAYS_SET.has(dateStr)) {
+      return false;
+    }
+  }
+  return true;
+};
+var formatJapaneseDate = function formatJapaneseDate(date) {
+  try {
+    var formatter = new Intl.DateTimeFormat("ja", {
+      month: "2-digit",
+      day: "2-digit",
+      weekday: "short"
+    });
+    var parts = formatter.formatToParts(date);
+    var month = "";
+    var day = "";
+    var weekday = "";
+    parts.forEach(function (part) {
+      if (part.type === "month") {
+        month = part.value;
+      } else if (part.type === "day") {
+        day = part.value;
+      } else if (part.type === "weekday") {
+        weekday = part.value;
+      }
+    });
+    return month + "/" + day + "(" + weekday + ")";
+  } catch (e) {
+    var _month = String(date.getMonth() + 1).padStart(2, "0");
+    var _day = String(date.getDate()).padStart(2, "0");
+    return _month + "/" + _day;
+  }
+};
+
 var styles$4 = {"gridRow":"_2dZTy","gridRowLine":"_3rUKi","gridTick":"_RuwuK"};
 
 var GridBody = function GridBody(_ref) {
@@ -1797,7 +1948,8 @@ var GridBody = function GridBody(_ref) {
     svgWidth = _ref.svgWidth,
     columnWidth = _ref.columnWidth,
     todayColor = _ref.todayColor,
-    rtl = _ref.rtl;
+    rtl = _ref.rtl,
+    calendarConfig = _ref.calendarConfig;
   var y = 0;
   var gridRows = [];
   var rowLines = [React__default.createElement("line", {
@@ -1831,6 +1983,7 @@ var GridBody = function GridBody(_ref) {
   var now = new Date();
   var tickX = 0;
   var ticks = [];
+  var nonWorkingDays = [];
   var today = React__default.createElement("rect", null);
   for (var i = 0; i < dates.length; i++) {
     var date = dates[i];
@@ -1842,6 +1995,16 @@ var GridBody = function GridBody(_ref) {
       y2: y,
       className: styles$4.gridTick
     }));
+    if (calendarConfig && calendarConfig.highlightNonWorkingDays && !isWorkingDay(date, calendarConfig)) {
+      nonWorkingDays.push(React__default.createElement("rect", {
+        key: "non-working-" + date.getTime(),
+        x: tickX,
+        y: 0,
+        width: columnWidth,
+        height: y,
+        fill: "rgba(0, 0, 0, 0.05)"
+      }));
+    }
     if (i + 1 !== dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime() || i !== 0 && i + 1 === dates.length && date.getTime() < now.getTime() && addToDate(date, date.getTime() - dates[i - 1].getTime(), "millisecond").getTime() >= now.getTime()) {
       today = React__default.createElement("rect", {
         x: tickX,
@@ -1867,6 +2030,8 @@ var GridBody = function GridBody(_ref) {
   }, React__default.createElement("g", {
     className: "rows"
   }, gridRows), React__default.createElement("g", {
+    className: "nonWorkingDays"
+  }, nonWorkingDays), React__default.createElement("g", {
     className: "rowLines"
   }, rowLines), React__default.createElement("g", {
     className: "ticks"
@@ -1915,7 +2080,9 @@ var Calendar = function Calendar(_ref) {
     headerHeight = _ref.headerHeight,
     columnWidth = _ref.columnWidth,
     fontFamily = _ref.fontFamily,
-    fontSize = _ref.fontSize;
+    fontSize = _ref.fontSize,
+    calendarConfig = _ref.calendarConfig;
+  var effectiveLocale = (calendarConfig === null || calendarConfig === void 0 ? void 0 : calendarConfig.locale) || locale;
   var getCalendarValuesForYear = function getCalendarValuesForYear() {
     var topValues = [];
     var bottomValues = [];
@@ -1990,7 +2157,7 @@ var Calendar = function Calendar(_ref) {
     var topDefaultHeight = headerHeight * 0.5;
     for (var i = 0; i < dateSetup.dates.length; i++) {
       var date = dateSetup.dates[i];
-      var bottomValue = getLocaleMonth(date, locale);
+      var bottomValue = getLocaleMonth(date, effectiveLocale);
       bottomValues.push(React__default.createElement("text", {
         key: bottomValue + date.getFullYear(),
         y: headerHeight * 0.8,
@@ -2028,7 +2195,7 @@ var Calendar = function Calendar(_ref) {
       var date = dates[i];
       var topValue = "";
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
-        topValue = getLocaleMonth(date, locale) + ", " + date.getFullYear();
+        topValue = getLocaleMonth(date, effectiveLocale) + ", " + date.getFullYear();
       }
       var bottomValue = "W" + getWeekNumberISO8601(date);
       bottomValues.push(React__default.createElement("text", {
@@ -2062,7 +2229,8 @@ var Calendar = function Calendar(_ref) {
     var dates = dateSetup.dates;
     for (var i = 0; i < dates.length; i++) {
       var date = dates[i];
-      var bottomValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString();
+      var useJapaneseFormat = !!calendarConfig && typeof calendarConfig.locale === "string" && calendarConfig.locale.toLowerCase().startsWith("ja");
+      var bottomValue = useJapaneseFormat ? formatJapaneseDate(date) : getLocalDayOfWeek(date, effectiveLocale, "short") + ", " + date.getDate().toString();
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
@@ -2070,7 +2238,7 @@ var Calendar = function Calendar(_ref) {
         className: styles$5.calendarBottomText
       }, bottomValue));
       if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
-        var topValue = getLocaleMonth(date, locale);
+        var topValue = getLocaleMonth(date, effectiveLocale);
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -2092,7 +2260,7 @@ var Calendar = function Calendar(_ref) {
     var dates = dateSetup.dates;
     for (var i = 0; i < dates.length; i++) {
       var date = dates[i];
-      var bottomValue = getCachedDateTimeFormat(locale, {
+      var bottomValue = getCachedDateTimeFormat(effectiveLocale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
@@ -2103,7 +2271,7 @@ var Calendar = function Calendar(_ref) {
         fontFamily: fontFamily
       }, bottomValue));
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + getLocaleMonth(date, locale);
+        var topValue = getLocalDayOfWeek(date, effectiveLocale, "short") + ", " + date.getDate() + " " + getLocaleMonth(date, effectiveLocale);
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -2124,7 +2292,7 @@ var Calendar = function Calendar(_ref) {
     var dates = dateSetup.dates;
     for (var i = 0; i < dates.length; i++) {
       var date = dates[i];
-      var bottomValue = getCachedDateTimeFormat(locale, {
+      var bottomValue = getCachedDateTimeFormat(effectiveLocale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
@@ -2136,7 +2304,7 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
         var displayDate = dates[i - 1];
-        var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + getLocaleMonth(displayDate, locale);
+        var topValue = getLocalDayOfWeek(displayDate, effectiveLocale, "long") + ", " + displayDate.getDate() + " " + getLocaleMonth(displayDate, effectiveLocale);
         var topPosition = (date.getHours() - 24) / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + displayDate.getFullYear(),
@@ -3306,6 +3474,7 @@ var Gantt = function Gantt(_ref) {
     preStepsCount = _ref$preStepsCount === void 0 ? 1 : _ref$preStepsCount,
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? "en-GB" : _ref$locale,
+    calendar = _ref.calendar,
     _ref$barFill = _ref.barFill,
     barFill = _ref$barFill === void 0 ? 60 : _ref$barFill,
     _ref$barCornerRadius = _ref.barCornerRadius,
@@ -3367,6 +3536,9 @@ var Gantt = function Gantt(_ref) {
     onExpanderClick = _ref.onExpanderClick,
     onTaskUpdate = _ref.onTaskUpdate,
     onCellCommit = _ref.onCellCommit;
+  var calendarConfig = React.useMemo(function () {
+    return calendar ? normalizeCalendarConfig(calendar) : undefined;
+  }, [calendar]);
   var wrapperRef = React.useRef(null);
   var taskListRef = React.useRef(null);
   var taskListHeaderRef = React.useRef(null);
@@ -3780,7 +3952,8 @@ var Gantt = function Gantt(_ref) {
     rowHeight: rowHeight,
     dates: dateSetup.dates,
     todayColor: todayColor,
-    rtl: rtl
+    rtl: rtl,
+    calendarConfig: calendarConfig
   };
   var calendarProps = {
     dateSetup: dateSetup,
@@ -3790,7 +3963,8 @@ var Gantt = function Gantt(_ref) {
     columnWidth: columnWidth,
     fontFamily: fontFamily,
     fontSize: fontSize,
-    rtl: rtl
+    rtl: rtl,
+    calendarConfig: calendarConfig
   };
   var barProps = {
     tasks: barTasks,