@instructure/ui-calendar 8.51.0 → 8.51.1-snapshot-5

package/lib/Calendar/index.js

@@ -14,13 +14,20 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 var _console = require("@instructure/console");
 var _uid = require("@instructure/uid");
+var _AccessibleContent = require("@instructure/ui-a11y-content/lib/AccessibleContent");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
+var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
+var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
+var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _Day = require("./Day");
 var _props = require("./props");
-var _dec, _dec2, _class, _class2;
+var _IconButton3 = require("@instructure/ui-buttons/lib/IconButton");
+var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
+var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
+var _dec, _dec2, _class, _class2, _IconButton, _IconButton2;
 /*
  * The MIT License (MIT)
  *
@@ -51,10 +58,10 @@ category: components
 ---
 **/
 let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Calendar extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.ref = null;
-    this._weekdayHeaderIds = this.props.renderWeekdayLabels.reduce((ids, _label, i) => {
+    this._weekdayHeaderIds = (this.props.renderWeekdayLabels || this.defaultWeekdays).reduce((ids, _label, i) => {
       return {
         ...ids,
         [i]: (0, _uid.uid)(`weekday-header-${i}`)
@@ -63,35 +70,107 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     this.handleRef = el => {
       this.ref = el;
     };
+    this.calculateState = (locale, timezone, currentDate) => ({
+      renderedDate: currentDate ? _DateTime.DateTime.parse(currentDate, locale, timezone) : _DateTime.DateTime.now(locale, timezone),
+      today: currentDate ? _DateTime.DateTime.parse(currentDate, locale, timezone) : _DateTime.DateTime.now(locale, timezone)
+    });
+    this.renderMonthNavigationButtons = () => {
+      const _this$props = this.props,
+        renderNextMonthButton = _this$props.renderNextMonthButton,
+        renderPrevMonthButton = _this$props.renderPrevMonthButton;
+      return {
+        prevButton: renderPrevMonthButton ? (0, _callRenderProp.callRenderProp)(renderPrevMonthButton) : _IconButton || (_IconButton = (0, _emotion.jsx)(_IconButton3.IconButton, {
+          size: "small",
+          withBackground: false,
+          withBorder: false,
+          renderIcon: (0, _emotion.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
+            color: "primary"
+          }),
+          screenReaderLabel: "Previous month"
+        })),
+        nextButton: renderNextMonthButton ? (0, _callRenderProp.callRenderProp)(renderNextMonthButton) : _IconButton2 || (_IconButton2 = (0, _emotion.jsx)(_IconButton3.IconButton, {
+          size: "small",
+          withBackground: false,
+          withBorder: false,
+          renderIcon: (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
+            color: "primary"
+          }),
+          screenReaderLabel: "Next month"
+        }))
+      };
+    };
+    this.handleMonthChange = direction => e => {
+      const _this$props2 = this.props,
+        onRequestRenderNextMonth = _this$props2.onRequestRenderNextMonth,
+        onRequestRenderPrevMonth = _this$props2.onRequestRenderPrevMonth;
+      const renderedDate = this.state.renderedDate;
+      const newDate = renderedDate.clone();
+      if (direction === 'prev') {
+        if (onRequestRenderPrevMonth) {
+          onRequestRenderPrevMonth(e);
+          return;
+        }
+        newDate.subtract({
+          months: 1
+        });
+      } else {
+        if (onRequestRenderNextMonth) {
+          onRequestRenderNextMonth(e);
+          return;
+        }
+        newDate.add({
+          months: 1
+        });
+      }
+      this.setState({
+        renderedDate: newDate
+      });
+    };
+    // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
+    this.handleDayClick = (event, {
+      date
+    }) => {
+      if (this.props.onDateSelected) {
+        const parsedDate = _DateTime.DateTime.parse(date, this.locale(), this.timezone());
+        this.props.onDateSelected(parsedDate.toISOString(), parsedDate, event);
+      }
+    };
+    this.state = this.calculateState(this.locale(), this.timezone(), props.currentDate);
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
   }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    const isUpdated = prevProps.locale !== this.props.locale || prevProps.timezone !== this.props.timezone;
+    if (isUpdated) {
+      this.setState(() => {
+        return {
+          ...this.calculateState(this.locale(), this.timezone(), this.props.currentDate)
+        };
+      });
+    }
   }
   get role() {
     return this.props.role === 'listbox' ? this.props.role : void 0;
   }
   renderHeader() {
-    const _this$props3 = this.props,
-      renderNextMonthButton = _this$props3.renderNextMonthButton,
-      renderPrevMonthButton = _this$props3.renderPrevMonthButton,
-      renderNavigationLabel = _this$props3.renderNavigationLabel,
-      onRequestRenderNextMonth = _this$props3.onRequestRenderNextMonth,
-      onRequestRenderPrevMonth = _this$props3.onRequestRenderPrevMonth,
-      styles = _this$props3.styles;
-    const nextButton = (0, _callRenderProp.callRenderProp)(renderNextMonthButton);
-    const prevButton = (0, _callRenderProp.callRenderProp)(renderPrevMonthButton);
+    const _this$props5 = this.props,
+      renderNavigationLabel = _this$props5.renderNavigationLabel,
+      styles = _this$props5.styles;
+    const renderedDate = this.state.renderedDate;
+    const _this$renderMonthNavi = this.renderMonthNavigationButtons(),
+      prevButton = _this$renderMonthNavi.prevButton,
+      nextButton = _this$renderMonthNavi.nextButton;
     const cloneButton = (button, onClick) => (0, _safeCloneElement.safeCloneElement)(button, {
       onClick: (0, _createChainedFunction.createChainedFunction)(button.props.onClick, onClick)
     });
     const style = [styles === null || styles === void 0 ? void 0 : styles.navigation, ...(prevButton || nextButton ? [styles === null || styles === void 0 ? void 0 : styles.navigationWithButtons] : [])];
     return (0, _emotion.jsx)("div", {
       css: style
-    }, prevButton && cloneButton(prevButton, onRequestRenderPrevMonth), (0, _callRenderProp.callRenderProp)(renderNavigationLabel), nextButton && cloneButton(nextButton, onRequestRenderNextMonth));
+    }, prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _emotion.jsx)("span", null, (0, _emotion.jsx)("div", null, renderedDate.format('MMMM')), (0, _emotion.jsx)("div", null, renderedDate.format('YYYY'))), nextButton && cloneButton(nextButton, this.handleMonthChange('next')));
   }
   renderBody() {
     return (0, _emotion.jsx)("table", {
@@ -99,9 +178,8 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     }, (0, _emotion.jsx)("thead", null, this.renderWeekdayHeaders()), (0, _emotion.jsx)("tbody", null, this.renderDays()));
   }
   renderWeekdayHeaders() {
-    const _this$props4 = this.props,
-      renderWeekdayLabels = _this$props4.renderWeekdayLabels,
-      styles = _this$props4.styles;
+    const styles = this.props.styles;
+    const renderWeekdayLabels = this.props.renderWeekdayLabels || this.defaultWeekdays;
     const length = renderWeekdayLabels.length;
     (0, _console.logError)(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
     return (0, _emotion.jsx)("tr", null, renderWeekdayLabels.map((label, i) => {
@@ -113,12 +191,39 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
       }, (0, _callRenderProp.callRenderProp)(label));
     }));
   }
+  get defaultWeekdays() {
+    const shortDayNames = _DateTime.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
+    const longDayNames = _DateTime.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
+    return [(0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
+      key: 1,
+      alt: longDayNames[0]
+    }, shortDayNames[0]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
+      key: 2,
+      alt: longDayNames[1]
+    }, shortDayNames[1]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
+      key: 3,
+      alt: longDayNames[2]
+    }, shortDayNames[2]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
+      key: 4,
+      alt: longDayNames[3]
+    }, shortDayNames[3]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
+      key: 5,
+      alt: longDayNames[4]
+    }, shortDayNames[4]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
+      key: 6,
+      alt: longDayNames[5]
+    }, shortDayNames[5]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
+      key: 7,
+      alt: longDayNames[6]
+    }, shortDayNames[6])];
+  }
   renderDays() {
-    const children = _react.Children.toArray(this.props.children);
-    const length = children.length;
+    const children = this.props.children;
+    const childrenArr = _react.Children.toArray(children ? children : this.renderDefaultdays());
+    const length = childrenArr.length;
     const role = this.role === 'listbox' ? 'presentation' : void 0;
     (0, _console.logError)(length === Calendar.DAY_COUNT, `[Calendar] should have exactly ${Calendar.DAY_COUNT} children. ${length} provided.`);
-    return children.reduce((days, day, i) => {
+    return childrenArr.reduce((days, day, i) => {
       const index = Math.floor(i / 7);
       if (!days[index]) days.push([]);
       days[index].push(day);
@@ -133,6 +238,68 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
       'aria-describedby': this._weekdayHeaderIds[i]
     }) : day))));
   }
+  locale() {
+    if (this.props.locale) {
+      return this.props.locale;
+    } else if (this.context && this.context.locale) {
+      return this.context.locale;
+    }
+    return _Locale.Locale.browserLocale();
+  }
+  timezone() {
+    if (this.props.timezone) {
+      return this.props.timezone;
+    } else if (this.context && this.context.timezone) {
+      return this.context.timezone;
+    }
+    return _DateTime.DateTime.browserTimeZone();
+  }
+  isDisabledDate(date) {
+    const disabledDates = this.props.disabledDates;
+    if (!disabledDates) {
+      return false;
+    }
+    if (Array.isArray(disabledDates)) {
+      for (const aDisabledDate of disabledDates) {
+        if (date.isSame(aDisabledDate, 'day')) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return disabledDates(date.toISOString());
+  }
+  renderDefaultdays() {
+    const selectedDate = this.props.selectedDate;
+    const _this$state = this.state,
+      renderedDate = _this$state.renderedDate,
+      today = _this$state.today;
+    // Sets it to the first local day of the week counting back from the start of the month.
+    // Note that first day depends on the locale, e.g. it's Sunday in the US and
+    // Monday in most of the EU.
+    const currDate = _DateTime.DateTime.getFirstDayOfWeek(renderedDate.clone().startOf('month'));
+    const arr = [];
+    for (let i = 0; i < Calendar.DAY_COUNT; i++) {
+      arr.push(currDate.clone());
+      currDate.add({
+        days: 1
+      });
+    }
+    return arr.map(date => {
+      const dateStr = date.toISOString();
+      return (0, _emotion.jsx)(Calendar.Day, {
+        key: dateStr,
+        date: dateStr,
+        isSelected: selectedDate ? date.isSame(selectedDate, 'day') : false,
+        isToday: date.isSame(today, 'day'),
+        isOutsideMonth: !date.isSame(renderedDate, 'month'),
+        label: date.format('D MMMM YYYY') // used by screen readers
+        ,
+        onClick: this.handleDayClick,
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
+      }, date.format('DD'));
+    });
+  }
   render() {
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Calendar.allowedProps), Calendar);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
@@ -143,7 +310,7 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
       elementRef: this.handleRef
     }), this.renderHeader(), this.renderBody());
   }
-}, _class2.displayName = "Calendar", _class2.componentId = 'Calendar', _class2.Day = _Day.Day, _class2.DAY_COUNT = 42, _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+}, _class2.displayName = "Calendar", _class2.componentId = 'Calendar', _class2.contextType = _ApplyLocaleContext.ApplyLocaleContext, _class2.Day = _Day.Day, _class2.DAY_COUNT = 42, _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   as: 'span',
   role: 'table'
 }, _class2)) || _class) || _class);

package/lib/Calendar/props.js

@@ -33,14 +33,20 @@ var _Day = require("./Day");
  */
 
 const propTypes = exports.propTypes = {
+  as: _propTypes.default.elementType,
   children: _Children.Children.oneOf([_Day.Day]),
-  renderNextMonthButton: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  renderPrevMonthButton: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  renderNavigationLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])).isRequired,
+  currentDate: _propTypes.default.string,
+  disabledDates: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func]),
+  locale: _propTypes.default.string,
+  onDateSelected: _propTypes.default.func,
   onRequestRenderNextMonth: _propTypes.default.func,
   onRequestRenderPrevMonth: _propTypes.default.func,
-  as: _propTypes.default.elementType,
-  role: _propTypes.default.oneOf(['table', 'listbox'])
+  renderNavigationLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  renderNextMonthButton: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  renderPrevMonthButton: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  renderWeekdayLabels: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])),
+  role: _propTypes.default.oneOf(['table', 'listbox']),
+  selectedDate: _propTypes.default.string,
+  timezone: _propTypes.default.string
 };
-const allowedProps = exports.allowedProps = ['children', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderNavigationLabel', 'renderWeekdayLabels', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'as', 'role'];
+const allowedProps = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "8.51.0",
+  "version": "8.51.1-snapshot-5",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,25 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.51.0",
-    "@instructure/ui-color-utils": "8.51.0",
-    "@instructure/ui-test-locator": "8.51.0",
-    "@instructure/ui-test-utils": "8.51.0",
-    "@instructure/ui-themes": "8.51.0"
+    "@instructure/ui-babel-preset": "8.51.1-snapshot-5",
+    "@instructure/ui-color-utils": "8.51.1-snapshot-5",
+    "@instructure/ui-test-locator": "8.51.1-snapshot-5",
+    "@instructure/ui-test-utils": "8.51.1-snapshot-5",
+    "@instructure/ui-themes": "8.51.1-snapshot-5",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.51.0",
-    "@instructure/emotion": "8.51.0",
-    "@instructure/shared-types": "8.51.0",
-    "@instructure/ui-a11y-content": "8.51.0",
-    "@instructure/ui-i18n": "8.51.0",
-    "@instructure/ui-prop-types": "8.51.0",
-    "@instructure/ui-react-utils": "8.51.0",
-    "@instructure/ui-testable": "8.51.0",
-    "@instructure/ui-utils": "8.51.0",
-    "@instructure/ui-view": "8.51.0",
-    "@instructure/uid": "8.51.0",
+    "@instructure/console": "8.51.1-snapshot-5",
+    "@instructure/emotion": "8.51.1-snapshot-5",
+    "@instructure/shared-types": "8.51.1-snapshot-5",
+    "@instructure/ui-a11y-content": "8.51.1-snapshot-5",
+    "@instructure/ui-buttons": "8.51.1-snapshot-5",
+    "@instructure/ui-i18n": "8.51.1-snapshot-5",
+    "@instructure/ui-icons": "8.51.1-snapshot-5",
+    "@instructure/ui-prop-types": "8.51.1-snapshot-5",
+    "@instructure/ui-react-utils": "8.51.1-snapshot-5",
+    "@instructure/ui-testable": "8.51.1-snapshot-5",
+    "@instructure/ui-utils": "8.51.1-snapshot-5",
+    "@instructure/ui-view": "8.51.1-snapshot-5",
+    "@instructure/uid": "8.51.1-snapshot-5",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Calendar/README.md

@@ -4,6 +4,57 @@ describes: Calendar
 
 The `Calendar` component provides a visual interface for date data.
 
+### Default config
+
+For ease of use in most situations, the `Calendar` component provides a default
+configuration. The default configuration can be overridden by providing props
+to the `Calendar` component.
+
+```js
+---
+type: example
+---
+<Calendar  locale="hu"/>
+```
+
+### Default config with additional props
+
+- ```js
+  class Example extends React.Component {
+    state = {
+      selectedDate: ''
+    }
+    render = () => (
+      <Calendar
+        currentDate="2023-12-15"
+        disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
+        selectedDate={this.state.selectedDate}
+        onDateSelected={(date) => {
+          this.setState({ selectedDate: date })
+        }}
+      />
+    )
+  }
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [selectedDate, setSelectedDate] = useState('')
+    return (
+      <Calendar
+        currentDate="2023-12-15"
+        disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
+        selectedDate={selectedDate}
+        onDateSelected={(date) => {
+          setSelectedDate(date)
+        }}
+      />
+    )
+  }
+  render(<Example />)
+  ```
+
 ### Composing a Calendar in your Application
 
 By design, the `Calendar` component does not dictate which date libraries or

package/src/Calendar/__new-tests__/Calendar.test.tsx

@@ -0,0 +1,83 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import '@testing-library/jest-dom'
+import Calendar from '../index'
+
+describe('<Calendar />', () => {
+  describe('with minimal config', () => {
+    it('should render 44 buttons without config', async () => {
+      render(<Calendar />)
+      const buttons = document.getElementsByTagName('button')
+      expect(buttons.length).toEqual(44)
+    })
+    it('should render proper week names by default', async () => {
+      const { container } = render(<Calendar />)
+      const thead = container.querySelector('thead')
+      expect(thead).toHaveTextContent(
+        'SundaySuMondayMoTuesdayTuWednesdayWeThursdayThFridayFrSaturdaySa'
+      )
+    })
+    it('should render proper week names if locale is set', async () => {
+      const { container } = render(<Calendar locale="hu" />)
+      const thead = container.querySelector('thead')
+      expect(thead).toHaveTextContent(
+        'hétfőhkeddkszerdaszecsütörtökcspéntekpszombatszovasárnapv'
+      )
+    })
+    it('should disable days properly', async () => {
+      const { container } = render(
+        <Calendar
+          currentDate="2023-12-15"
+          disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
+        />
+      )
+      const buttons = container.querySelectorAll('button[disabled]')
+
+      const disabledTexts = [
+        '11 December 202311',
+        '12 December 202312',
+        '22 December 202322'
+      ]
+      buttons.forEach((button, index) => {
+        expect(button).toHaveTextContent(disabledTexts[index])
+      })
+    })
+    it('should indicate selected day', async () => {
+      render(<Calendar currentDate="2023-12-15" selectedDate="2023-12-22" />)
+
+      const selectedDay =
+        screen.queryByText('22 December 2023')?.parentElement?.parentElement
+
+      expect(selectedDay).toBeDefined()
+      if (selectedDay) {
+        expect(window.getComputedStyle(selectedDay)?.background).toBe(
+          'rgb(11, 135, 75)'
+        )
+      }
+    })
+  })
+})