@zohodesk/components 1.2.49 → 1.2.51

package/lib/DateTime/CalendarView.js

@@ -80,9 +80,11 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
           dayNamesShort = _this$props.dayNamesShort,
           todayMonth = _this$props.todayMonth,
           todayDate = _this$props.todayDate,
-          todayYear = _this$props.todayYear;
+          todayYear = _this$props.todayYear,
+          weekStartDay = _this$props.weekStartDay,
+          holidays = _this$props.holidays;
       var userSeeDate = new Date(year, month, 1);
-      var userSeeDay = userSeeDate.getDay() + 1;
+      var userSeeDay = (userSeeDate.getDay() - weekStartDay + dayNames.length) % dayNames.length + 1;
       var userSeeYear = userSeeDate.getFullYear();
       var userSeeMonth = userSeeDate.getMonth();
       var monthEnd = (0, _common.getMonthEnd)(month, year);
@@ -113,8 +115,8 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
             isSelectedDay = false;
             var tdclass = "".concat(_DateTimeModule["default"].datesStr, " ").concat(_DateTimeModule["default"].grid);
 
-            if (i === 1) {
-              tdclass += " ".concat(_DateTimeModule["default"].sunday);
+            if (holidays.includes(i - 1)) {
+              tdclass += " ".concat(_DateTimeModule["default"].holiday);
             }
 
             if (incremleti >= userSeeDay && incremday <= monthEnd) {
@@ -218,7 +220,8 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_DaysRow["default"], {
         dayNames: dayNames,
         dayNamesShort: dayNamesShort,
-        ariaLabel: dayNamesShort
+        ariaLabel: dayNamesShort,
+        holidays: holidays
       }), /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_dateContainer"),
         "data-test-id": "".concat(dataId, "_dateContainer"),

package/lib/DateTime/DateTime.js

@@ -43,6 +43,14 @@ var _dateFormat = require("./dateFormatUtils/dateFormat");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -726,7 +734,9 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           isRestrictScroll = _this$props7.isRestrictScroll,
           dropBoxPortalId = _this$props7.dropBoxPortalId,
           _this$props7$customPr = _this$props7.customProps,
-          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr;
+          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr,
+          weekStartDay = _this$props7.weekStartDay,
+          holidays = _this$props7.holidays;
       var _customProps$TimeProp = customProps.TimeProps,
           TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp;
       var _i18nKeys$timeText = i18nKeys.timeText,
@@ -752,6 +762,17 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           _i18nKeys$dayNamesSho = i18nKeys.dayNamesShort,
           dayNamesShort = _i18nKeys$dayNamesSho === void 0 ? _constants.dayNamesShortDefault : _i18nKeys$dayNamesSho;
       var showmonthtxt = title(date, year, month, monthNames);
+      var customDayNames = dayNames,
+          customDayNamesShort = dayNamesShort,
+          customizedHolidays = holidays;
+
+      if (weekStartDay !== 0) {
+        customDayNames = [].concat(_toConsumableArray(dayNames.slice(weekStartDay)), _toConsumableArray(dayNames.slice(0, weekStartDay)));
+        customDayNamesShort = [].concat(_toConsumableArray(dayNamesShort.slice(weekStartDay)), _toConsumableArray(dayNamesShort.slice(0, weekStartDay)));
+        customizedHolidays = holidays.map(function (dayIndex) {
+          return customDayNames.indexOf(dayNames[dayIndex]);
+        });
+      }
 
       var childEle = /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].container, " ").concat(innerClass),
@@ -774,11 +795,13 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         year: year,
         month: month,
         onSelect: this.dateSelect,
-        dayNames: dayNames,
-        dayNamesShort: dayNamesShort,
+        dayNames: customDayNames,
+        dayNamesShort: customDayNamesShort,
         todayDate: todayDate,
         todayMonth: todayMonth,
-        todayYear: todayYear
+        todayYear: todayYear,
+        weekStartDay: weekStartDay,
+        holidays: customizedHolidays
       }), isDateTimeField ? /*#__PURE__*/_react["default"].createElement(_Time["default"], {
         timeText: timeText,
         dataId: dataId,

package/lib/DateTime/DateTime.module.css

@@ -112,9 +112,9 @@
   margin-bottom: 0 ;
 }
 
-.sunday,
-.sunday:hover,
-.invalidDate.sunday:hover {
+.holiday,
+.holiday:hover,
+.invalidDate.holiday:hover {
   color: var(--zdt_datetime_invalid_hover_text);
 }
 
@@ -122,7 +122,7 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.sunday,.inActiveDate.sunday:hover {
+.invalidDate.holiday,.inActiveDate.holiday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -155,7 +155,7 @@ cursor: no-drop;
 {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.sunday:hover{
+.inActiveDate:hover, .inActiveDate.holiday:hover{
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }

package/lib/DateTime/DateWidget.js

@@ -1032,6 +1032,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props12.a11y,
           boxSize = _this$props12.boxSize,
           onError = _this$props12.onError,
+          weekStartDay = _this$props12.weekStartDay,
+          holidays = _this$props12.holidays,
           _this$props12$customP = _this$props12.customProps,
           customProps = _this$props12$customP === void 0 ? {} : _this$props12$customP;
       var _customProps$DateTime = customProps.DateTimeProps,
@@ -1134,7 +1136,9 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         dropBoxPortalId: dropBoxPortalId,
         boxSize: boxSize,
         onError: onError,
-        customProps: DateTimeProps
+        customProps: DateTimeProps,
+        weekStartDay: weekStartDay,
+        holidays: holidays
       }));
     }
   }]);

package/lib/DateTime/DaysRow.js

@@ -57,7 +57,8 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this$props = this.props,
           dayNames = _this$props.dayNames,
-          dayNamesShort = _this$props.dayNamesShort;
+          dayNamesShort = _this$props.dayNamesShort,
+          holidays = _this$props.holidays;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "center",
@@ -65,7 +66,7 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
       }, dayNames.map(function (dayName, index) {
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           key: dayName,
-          className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(index === 0 ? _DateTimeModule["default"].sunday : ''),
+          className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(holidays.includes(index) ? _DateTimeModule["default"].holiday : ''),
           "data-title": dayName,
           "aria-label": dayName
         }, dayNamesShort[index]);

package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -96,7 +96,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
         >
           <div
             aria-label="Sunday"
-            class="daysStr grid sunday shrinkOff"
+            class="daysStr grid holiday shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -178,7 +178,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="25"
-              class="datesStr grid sunday invalidDate   shrinkOff"
+              class="datesStr grid holiday invalidDate   shrinkOff"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -248,7 +248,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="2"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -318,7 +318,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="9"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -388,7 +388,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="16"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -458,7 +458,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="23"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -528,7 +528,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           >
             <div
               aria-label="30"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid holiday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"

package/lib/DateTime/props/defaultProps.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.YearView_defaultProps = exports.Time_defaultProps = exports.Span_defaultProps = exports.DateWidget_defaultProps = exports.DateTime_defaultProps = exports.DateTimePopupFooter_defaultProps = exports.CalendarView_defaultProps = void 0;
 var CalendarView_defaultProps = {
   dataId: 'dateContainer',
-  needBorder: true
+  needBorder: true,
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.CalendarView_defaultProps = CalendarView_defaultProps;
 var Span_defaultProps = {
@@ -29,7 +31,9 @@ var DateTime_defaultProps = {
   is24Hour: false,
   isDefaultPosition: false,
   customDateFormat: null,
-  customProps: {}
+  customProps: {},
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.DateTime_defaultProps = DateTime_defaultProps;
 var DateWidget_defaultProps = {
@@ -53,7 +57,9 @@ var DateWidget_defaultProps = {
   needErrorOnBlur: false,
   isEditable: false,
   iconOnHover: false,
-  is24Hour: false
+  is24Hour: false,
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.DateWidget_defaultProps = DateWidget_defaultProps;
 var YearView_defaultProps = {

package/lib/DateTime/props/propTypes.js

@@ -34,7 +34,9 @@ var CalendarView_propTypes = {
   dayNamesShort: _propTypes["default"].array,
   todayMonth: _propTypes["default"].string,
   todayDate: _propTypes["default"].string,
-  todayYear: _propTypes["default"].string
+  todayYear: _propTypes["default"].string,
+  weekStartDay: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
 };
 exports.CalendarView_propTypes = CalendarView_propTypes;
 var Span_propTypes = {
@@ -98,7 +100,9 @@ var DateTime_propTypes = {
   targetOffset: _propTypes["default"].string,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
-  customProps: _propTypes["default"].object
+  customProps: _propTypes["default"].object,
+  weekStartDay: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
 };
 exports.DateTime_propTypes = DateTime_propTypes;
 var DateWidget_propTypes = {
@@ -168,7 +172,9 @@ var DateWidget_propTypes = {
   dropBoxPortalId: _propTypes["default"].string,
   a11y: _propTypes["default"].object,
   getPopupProps: _propTypes["default"].func,
-  customProps: _propTypes["default"].object
+  customProps: _propTypes["default"].object,
+  weekStartDay: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5, 6]),
+  holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {
@@ -199,7 +205,8 @@ var DateTimePopupHeader_propTypes = {
 exports.DateTimePopupHeader_propTypes = DateTimePopupHeader_propTypes;
 var DaysRow_propTypes = {
   dayNames: _propTypes["default"].array,
-  dayNamesShort: _propTypes["default"].object
+  dayNamesShort: _propTypes["default"].object,
+  holidays: _propTypes["default"].arrayOf(_propTypes["default"].number)
 };
 exports.DaysRow_propTypes = DaysRow_propTypes;
 var Time_propTypes = {

package/lib/Popup/Popup.js

@@ -158,6 +158,8 @@ var Popup = function Popup(Component) {
       _this.preventKeyboardScroll = _this.preventKeyboardScroll.bind(_assertThisInitialized(_this));
       _this.addScrollBlockListeners = _this.addScrollBlockListeners.bind(_assertThisInitialized(_this));
       _this.removeScrollBlockListeners = _this.removeScrollBlockListeners.bind(_assertThisInitialized(_this));
+      _this.handleAddingScrollBlock = _this.handleAddingScrollBlock.bind(_assertThisInitialized(_this));
+      _this.handleRemovingScrollBlock = _this.handleRemovingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleIntersectionObserver = _this.handleIntersectionObserver.bind(_assertThisInitialized(_this));
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
@@ -216,10 +218,7 @@ var Popup = function Popup(Component) {
             oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady;
 
         var dropElement = this.dropElement;
-        var _this$props = this.props,
-            propResizeHandling = _this$props.needResizeHandling,
-            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
-            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+        var propResizeHandling = this.props.needResizeHandling;
 
         if (oldStateOpen !== isPopupReady) {
           if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
@@ -229,14 +228,10 @@ var Popup = function Popup(Component) {
             this.popupObserver.disconnect();
           }
 
-          if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
-            if (isPopupReady) {
-              (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-              this.addScrollBlockListeners();
-            } else {
-              (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-              this.removeScrollBlockListeners();
-            }
+          if (isPopupReady) {
+            this.handleAddingScrollBlock();
+          } else {
+            this.handleRemovingScrollBlock();
           }
         }
       }
@@ -258,8 +253,7 @@ var Popup = function Popup(Component) {
 
           return res;
         }, popups);
-        (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-        this.removeScrollBlockListeners();
+        this.handleRemovingScrollBlock();
         var noPopups = true;
 
         for (var i in popups) {
@@ -283,6 +277,30 @@ var Popup = function Popup(Component) {
           document.removeEventListener('focus', this.handleDocumentFocus, true);
         }
       }
+    }, {
+      key: "handleAddingScrollBlock",
+      value: function handleAddingScrollBlock() {
+        var _this$props = this.props,
+            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+
+        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
+          this.addScrollBlockListeners();
+        }
+      }
+    }, {
+      key: "handleRemovingScrollBlock",
+      value: function handleRemovingScrollBlock() {
+        var _this$props2 = this.props,
+            isAbsolutePositioningNeeded = _this$props2.isAbsolutePositioningNeeded,
+            isOutsideScrollBlocked = _this$props2.isOutsideScrollBlocked;
+
+        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
+          this.removeScrollBlockListeners();
+        }
+      }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {

package/lib/Popup/intersectionObserver.js

@@ -22,41 +22,51 @@ var observerCallbacks = null;
 var intersectionObserver = null;
 
 function handleObserverCallbacks(entries) {
-  entries.map(function (entry, i) {
+  entries.forEach(function (entry) {
     var oldCallbacks = observerCallbacks.get(entry.target);
-    oldCallbacks.length && oldCallbacks.forEach(function (callback) {
-      callback && callback(entry);
-    });
+
+    if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
+      oldCallbacks.forEach(function (callback) {
+        callback && callback(entry);
+      });
+    }
   });
 }
 
 function addIntersectionObserver(element, callback, options) {
-  if (intersectionObserver === null && observerCallbacks === null) {
-    intersectionObserver = new IntersectionObserver(function (entries) {
-      handleObserverCallbacks(entries);
-    }, options);
-    observerCallbacks = new Map();
-  }
+  if (!!element && typeof callback == 'function') {
+    if (intersectionObserver === null && observerCallbacks === null) {
+      intersectionObserver = new IntersectionObserver(function (entries) {
+        handleObserverCallbacks(entries);
+      }, options);
+      observerCallbacks = new Map();
+    }
 
-  intersectionObserver.observe(element);
-  var oldCallbacks = observerCallbacks.get(element) || [];
-  observerCallbacks.set(element, [].concat(_toConsumableArray(oldCallbacks), [callback]));
+    intersectionObserver.observe(element);
+    var oldCallbacks = observerCallbacks.get(element) || [];
+    observerCallbacks.set(element, [].concat(_toConsumableArray(oldCallbacks), [callback]));
+  }
 }
 
 function removeIntersectionObserver(element, callback) {
-  var oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
-  oldCallbacks = oldCallbacks.filter(function (handler) {
-    return handler !== callback;
-  });
+  if (!!element && typeof callback == 'function') {
+    var oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
 
-  if (intersectionObserver && oldCallbacks.length === 0) {
-    observerCallbacks["delete"](element);
-    intersectionObserver.unobserve(element);
-  }
+    if (Array.isArray(oldCallbacks)) {
+      var callbacks = oldCallbacks.filter(function (handler) {
+        return handler !== callback;
+      });
+
+      if (intersectionObserver && callbacks.length === 0) {
+        observerCallbacks["delete"](element);
+        intersectionObserver.unobserve(element);
+      }
+    }
 
-  if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
-    intersectionObserver.disconnect();
-    intersectionObserver = null;
-    observerCallbacks = null;
+    if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
+      intersectionObserver.disconnect();
+      intersectionObserver = null;
+      observerCallbacks = null;
+    }
   }
 }

package/lib/v1/DateTime/CalendarView.js

@@ -84,9 +84,11 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
           todayDate = _this$props.todayDate,
           todayYear = _this$props.todayYear,
           startDate = _this$props.startDate,
-          endDate = _this$props.endDate;
+          endDate = _this$props.endDate,
+          weekStartDay = _this$props.weekStartDay,
+          holidays = _this$props.holidays;
       var userSeeDate = new Date(year, month, 1);
-      var userSeeDay = userSeeDate.getDay() + 1;
+      var userSeeDay = (userSeeDate.getDay() - weekStartDay + dayNames.length) % dayNames.length + 1;
       var userSeeYear = userSeeDate.getFullYear();
       var userSeeMonth = userSeeDate.getMonth();
       var monthEnd = (0, _common.getMonthEnd)(month, year);
@@ -114,10 +116,10 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
           var output = null;
 
           for (var i = 1; i <= 7; i++) {
-            var tdclass = "".concat(_DateTimeModule["default"].datesStr, " ").concat(_DateTimeModule["default"].grid);
+            var tdclass = "".concat(_DateTimeModule["default"].datesStr, " ").concat(_DateTimeModule["default"].grid); // if (i === 1) {
 
-            if (i === 1) {
-              tdclass += " ".concat(_DateTimeModule["default"].sunday);
+            if (holidays.includes(i - 1)) {
+              tdclass += " ".concat(_DateTimeModule["default"].holiday);
             }
 
             if (incremleti >= userSeeDay && incremday <= monthEnd) {
@@ -226,7 +228,8 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_DaysRow["default"], {
         dayNames: dayNames,
         dayNamesShort: dayNamesShort,
-        ariaLabel: dayNamesShort
+        ariaLabel: dayNamesShort,
+        holidays: holidays
       }), /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_dateContainer"),
         "data-test-id": "".concat(dataId, "_dateContainer"),

package/lib/v1/DateTime/DateTime.js

@@ -43,6 +43,14 @@ var _dateFormat = require("./../../DateTime/dateFormatUtils/dateFormat");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -728,7 +736,9 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           startDate = _this$props7.startDate,
           endDate = _this$props7.endDate,
           _this$props7$customPr = _this$props7.customProps,
-          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr;
+          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr,
+          holidays = _this$props7.holidays,
+          weekStartDay = _this$props7.weekStartDay;
       var _customProps$TimeProp = customProps.TimeProps,
           TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp;
       var _i18nKeys$timeText = i18nKeys.timeText,
@@ -754,6 +764,17 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           _i18nKeys$dayNamesSho = i18nKeys.dayNamesShort,
           dayNamesShort = _i18nKeys$dayNamesSho === void 0 ? _constants.dayNamesShortDefault : _i18nKeys$dayNamesSho;
       var showmonthtxt = title(date, year, month, monthNames);
+      var customDayNames = dayNames,
+          customDayNamesShort = dayNamesShort,
+          customizedHolidays = holidays;
+
+      if (weekStartDay !== 0) {
+        customDayNames = [].concat(_toConsumableArray(dayNames.slice(weekStartDay)), _toConsumableArray(dayNames.slice(0, weekStartDay)));
+        customDayNamesShort = [].concat(_toConsumableArray(dayNamesShort.slice(weekStartDay)), _toConsumableArray(dayNamesShort.slice(0, weekStartDay)));
+        customizedHolidays = holidays.map(function (dayIndex) {
+          return customDayNames.indexOf(dayNames[dayIndex]);
+        });
+      }
 
       var childEle = /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].container, " ").concat(innerClass),
@@ -776,13 +797,15 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         year: year,
         month: month,
         onSelect: this.dateSelect,
-        dayNames: dayNames,
-        dayNamesShort: dayNamesShort,
+        dayNames: customDayNames,
+        dayNamesShort: customDayNamesShort,
         todayDate: todayDate,
         todayMonth: todayMonth,
         todayYear: todayYear,
         startDate: startDate,
-        endDate: endDate
+        endDate: endDate,
+        weekStartDay: weekStartDay,
+        holidays: customizedHolidays
       }), isDateTimeField ? /*#__PURE__*/_react["default"].createElement(_Time["default"], {
         timeText: timeText,
         dataId: dataId,

package/lib/v1/DateTime/DateWidget.js

@@ -1032,6 +1032,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           onError = _this$props12.onError,
           startDate = _this$props12.startDate,
           endDate = _this$props12.endDate,
+          weekStartDay = _this$props12.weekStartDay,
+          holidays = _this$props12.holidays,
           _this$props12$customP = _this$props12.customProps,
           customProps = _this$props12$customP === void 0 ? {} : _this$props12$customP;
       var _customProps$DateTime = customProps.DateTimeProps,
@@ -1131,7 +1133,9 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         onError: onError,
         startDate: startDate,
         endDate: endDate,
-        customProps: DateTimeProps
+        customProps: DateTimeProps,
+        weekStartDay: weekStartDay,
+        holidays: holidays
       }));
     }
   }]);

package/lib/v1/DateTime/DaysRow.js

@@ -57,7 +57,8 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this$props = this.props,
           dayNames = _this$props.dayNames,
-          dayNamesShort = _this$props.dayNamesShort;
+          dayNamesShort = _this$props.dayNamesShort,
+          holidays = _this$props.holidays;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "center",
@@ -65,7 +66,7 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
       }, dayNames.map(function (dayName, index) {
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           key: dayName,
-          className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(index === 0 ? _DateTimeModule["default"].sunday : ''),
+          className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(holidays.includes(index) ? _DateTimeModule["default"].holiday : ''),
           "data-title": dayName,
           "aria-label": dayName
         }, dayNamesShort[index]);

package/lib/v1/DateTime/props/defaultProps.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.YearView_defaultProps = exports.Time_defaultProps = exports.Span_defaultProps = exports.DateWidget_defaultProps = exports.DateTime_defaultProps = exports.DateTimePopupFooter_defaultProps = exports.CalendarView_defaultProps = void 0;
 var CalendarView_defaultProps = {
   dataId: 'dateContainer',
-  needBorder: true
+  needBorder: true,
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.CalendarView_defaultProps = CalendarView_defaultProps;
 var Span_defaultProps = {
@@ -28,7 +30,9 @@ var DateTime_defaultProps = {
   i18nKeys: {},
   is24Hour: false,
   isDefaultPosition: false,
-  customDateFormat: null
+  customDateFormat: null,
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.DateTime_defaultProps = DateTime_defaultProps;
 var DateWidget_defaultProps = {
@@ -52,7 +56,9 @@ var DateWidget_defaultProps = {
   needErrorOnBlur: false,
   isEditable: false,
   iconOnHover: false,
-  is24Hour: false
+  is24Hour: false,
+  weekStartDay: 0,
+  holidays: [0]
 };
 exports.DateWidget_defaultProps = DateWidget_defaultProps;
 var YearView_defaultProps = {