@instructure/ui-calendar 8.52.1-snapshot-7 → 8.53.0

package/CHANGELOG.md

@@ -3,182 +3,98 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.52.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.52.1-snapshot-7) (2024-02-07)
-
-**Note:** Version bump only for package @instructure/ui-calendar
-
-
+# [8.53.0](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.53.0) (2024-02-08)
 
+### Features
 
+- **many:** provide defaults to dateInput for easier setup and use ([dcefc4e](https://github.com/instructure/instructure-ui/commit/dcefc4e259118264d76dfd248b01682a7c2ef661))
 
 # [8.52.0](https://github.com/instructure/instructure-ui/compare/v8.51.0...v8.52.0) (2024-02-02)
 
-
 ### Bug Fixes
 
-* **shared-types:** extend OtherHTMLAttributes with Element ([474fa4d](https://github.com/instructure/instructure-ui/commit/474fa4da4781acc347b993a7c64c52d101b00feb))
-
+- **shared-types:** extend OtherHTMLAttributes with Element ([474fa4d](https://github.com/instructure/instructure-ui/commit/474fa4da4781acc347b993a7c64c52d101b00feb))
 
 ### Features
 
-* **ui-calendar:** make easy and minimal configuration possible ([911ac1b](https://github.com/instructure/instructure-ui/commit/911ac1b3c4523455a1e49f0581575952dcfc8605))
-
-
-
-
+- **ui-calendar:** make easy and minimal configuration possible ([911ac1b](https://github.com/instructure/instructure-ui/commit/911ac1b3c4523455a1e49f0581575952dcfc8605))
 
 # [8.51.0](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.51.0) (2023-12-14)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.50.0](https://github.com/instructure/instructure-ui/compare/v8.49.0...v8.50.0) (2023-12-05)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.49.0](https://github.com/instructure/instructure-ui/compare/v8.48.3...v8.49.0) (2023-11-24)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 ## [8.48.3](https://github.com/instructure/instructure-ui/compare/v8.48.2...v8.48.3) (2023-11-23)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 ## [8.48.2](https://github.com/instructure/instructure-ui/compare/v8.48.1...v8.48.2) (2023-11-21)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 ## [8.48.1](https://github.com/instructure/instructure-ui/compare/v8.48.0...v8.48.1) (2023-11-17)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.48.0](https://github.com/instructure/instructure-ui/compare/v8.47.1...v8.48.0) (2023-11-10)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 ## [8.47.1](https://github.com/instructure/instructure-ui/compare/v8.47.0...v8.47.1) (2023-11-06)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.47.0](https://github.com/instructure/instructure-ui/compare/v8.46.1...v8.47.0) (2023-10-27)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 ## [8.46.1](https://github.com/instructure/instructure-ui/compare/v8.46.0...v8.46.1) (2023-10-13)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.46.0](https://github.com/instructure/instructure-ui/compare/v8.45.0...v8.46.0) (2023-10-11)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.45.0](https://github.com/instructure/instructure-ui/compare/v8.44.0...v8.45.0) (2023-10-03)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.44.0](https://github.com/instructure/instructure-ui/compare/v8.43.1...v8.44.0) (2023-09-21)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 ## [8.43.1](https://github.com/instructure/instructure-ui/compare/v8.43.0...v8.43.1) (2023-09-11)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.43.0](https://github.com/instructure/instructure-ui/compare/v8.41.1...v8.43.0) (2023-09-07)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.42.0](https://github.com/instructure/instructure-ui/compare/v8.41.1...v8.42.0) (2023-09-07)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 ## [8.41.1](https://github.com/instructure/instructure-ui/compare/v8.41.0...v8.41.1) (2023-08-24)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.41.0](https://github.com/instructure/instructure-ui/compare/v8.40.1...v8.41.0) (2023-08-21)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 ## [8.40.1](https://github.com/instructure/instructure-ui/compare/v8.40.0...v8.40.1) (2023-08-18)
 
 **Note:** Version bump only for package @instructure/ui-calendar
 
-
-
-
-
 # [8.40.0](https://github.com/instructure/instructure-ui/compare/v8.39.0...v8.40.0) (2023-08-17)
 
 **Note:** Version bump only for package @instructure/ui-calendar

package/es/Calendar/index.js

@@ -59,10 +59,13 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     this.handleRef = el => {
       this.ref = el;
     };
-    this.calculateState = (locale, timezone, currentDate) => ({
-      renderedDate: currentDate ? DateTime.parse(currentDate, locale, timezone) : DateTime.now(locale, timezone),
-      today: currentDate ? DateTime.parse(currentDate, locale, timezone) : DateTime.now(locale, timezone)
-    });
+    this.calculateState = (locale, timezone, currentDate) => {
+      const visibleMonth = this.props.visibleMonth || currentDate;
+      return {
+        visibleMonth: visibleMonth ? DateTime.parse(visibleMonth, locale, timezone) : DateTime.now(locale, timezone),
+        today: currentDate ? DateTime.parse(currentDate, locale, timezone) : DateTime.now(locale, timezone)
+      };
+    };
     this.renderMonthNavigationButtons = () => {
       const _this$props = this.props,
         renderNextMonthButton = _this$props.renderNextMonthButton,
@@ -92,11 +95,13 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       const _this$props2 = this.props,
         onRequestRenderNextMonth = _this$props2.onRequestRenderNextMonth,
         onRequestRenderPrevMonth = _this$props2.onRequestRenderPrevMonth;
-      const renderedDate = this.state.renderedDate;
-      const newDate = renderedDate.clone();
+      const visibleMonth = this.state.visibleMonth;
+      const newDate = visibleMonth.clone();
       if (direction === 'prev') {
         if (onRequestRenderPrevMonth) {
-          onRequestRenderPrevMonth(e);
+          onRequestRenderPrevMonth(e, newDate.subtract({
+            months: 1
+          }).format('YYYY-MM'));
           return;
         }
         newDate.subtract({
@@ -104,7 +109,9 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         });
       } else {
         if (onRequestRenderNextMonth) {
-          onRequestRenderNextMonth(e);
+          onRequestRenderNextMonth(e, newDate.add({
+            months: 1
+          }).format('YYYY-MM'));
           return;
         }
         newDate.add({
@@ -112,7 +119,7 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         });
       }
       this.setState({
-        renderedDate: newDate
+        visibleMonth: newDate
       });
     };
     // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
@@ -133,7 +140,7 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   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;
+    const isUpdated = prevProps.locale !== this.props.locale || prevProps.timezone !== this.props.timezone || prevProps.visibleMonth !== this.props.visibleMonth;
     if (isUpdated) {
       this.setState(() => {
         return {
@@ -149,7 +156,7 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     const _this$props5 = this.props,
       renderNavigationLabel = _this$props5.renderNavigationLabel,
       styles = _this$props5.styles;
-    const renderedDate = this.state.renderedDate;
+    const visibleMonth = this.state.visibleMonth;
     const _this$renderMonthNavi = this.renderMonthNavigationButtons(),
       prevButton = _this$renderMonthNavi.prevButton,
       nextButton = _this$renderMonthNavi.nextButton;
@@ -159,7 +166,7 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     const style = [styles === null || styles === void 0 ? void 0 : styles.navigation, ...(prevButton || nextButton ? [styles === null || styles === void 0 ? void 0 : styles.navigationWithButtons] : [])];
     return jsx("div", {
       css: style
-    }, prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : jsx("span", null, jsx("div", null, renderedDate.format('MMMM')), jsx("div", null, renderedDate.format('YYYY'))), nextButton && cloneButton(nextButton, this.handleMonthChange('next')));
+    }, prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : jsx("span", null, jsx("div", null, visibleMonth.format('MMMM')), jsx("div", null, visibleMonth.format('YYYY'))), nextButton && cloneButton(nextButton, this.handleMonthChange('next')));
   }
   renderBody() {
     return jsx("table", {
@@ -261,12 +268,12 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   renderDefaultdays() {
     const selectedDate = this.props.selectedDate;
     const _this$state = this.state,
-      renderedDate = _this$state.renderedDate,
+      visibleMonth = _this$state.visibleMonth,
       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.getFirstDayOfWeek(renderedDate.clone().startOf('month'));
+    const currDate = DateTime.getFirstDayOfWeek(visibleMonth.clone().startOf('month'));
     const arr = [];
     for (let i = 0; i < Calendar.DAY_COUNT; i++) {
       arr.push(currDate.clone());
@@ -281,7 +288,7 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         date: dateStr,
         isSelected: selectedDate ? date.isSame(selectedDate, 'day') : false,
         isToday: date.isSame(today, 'day'),
-        isOutsideMonth: !date.isSame(renderedDate, 'month'),
+        isOutsideMonth: !date.isSame(visibleMonth, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
         onClick: this.handleDayClick,

package/es/Calendar/props.js

@@ -40,7 +40,8 @@ const propTypes = {
   renderWeekdayLabels: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.func])),
   role: PropTypes.oneOf(['table', 'listbox']),
   selectedDate: PropTypes.string,
-  timezone: PropTypes.string
+  timezone: PropTypes.string,
+  visibleMonth: PropTypes.string
 };
-const allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone'];
+const allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];
 export { propTypes, allowedProps };

package/lib/Calendar/index.js

@@ -70,10 +70,13 @@ 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.calculateState = (locale, timezone, currentDate) => {
+      const visibleMonth = this.props.visibleMonth || currentDate;
+      return {
+        visibleMonth: visibleMonth ? _DateTime.DateTime.parse(visibleMonth, 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,
@@ -103,11 +106,13 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
       const _this$props2 = this.props,
         onRequestRenderNextMonth = _this$props2.onRequestRenderNextMonth,
         onRequestRenderPrevMonth = _this$props2.onRequestRenderPrevMonth;
-      const renderedDate = this.state.renderedDate;
-      const newDate = renderedDate.clone();
+      const visibleMonth = this.state.visibleMonth;
+      const newDate = visibleMonth.clone();
       if (direction === 'prev') {
         if (onRequestRenderPrevMonth) {
-          onRequestRenderPrevMonth(e);
+          onRequestRenderPrevMonth(e, newDate.subtract({
+            months: 1
+          }).format('YYYY-MM'));
           return;
         }
         newDate.subtract({
@@ -115,7 +120,9 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
         });
       } else {
         if (onRequestRenderNextMonth) {
-          onRequestRenderNextMonth(e);
+          onRequestRenderNextMonth(e, newDate.add({
+            months: 1
+          }).format('YYYY-MM'));
           return;
         }
         newDate.add({
@@ -123,7 +130,7 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
         });
       }
       this.setState({
-        renderedDate: newDate
+        visibleMonth: newDate
       });
     };
     // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
@@ -144,7 +151,7 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
   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;
+    const isUpdated = prevProps.locale !== this.props.locale || prevProps.timezone !== this.props.timezone || prevProps.visibleMonth !== this.props.visibleMonth;
     if (isUpdated) {
       this.setState(() => {
         return {
@@ -160,7 +167,7 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     const _this$props5 = this.props,
       renderNavigationLabel = _this$props5.renderNavigationLabel,
       styles = _this$props5.styles;
-    const renderedDate = this.state.renderedDate;
+    const visibleMonth = this.state.visibleMonth;
     const _this$renderMonthNavi = this.renderMonthNavigationButtons(),
       prevButton = _this$renderMonthNavi.prevButton,
       nextButton = _this$renderMonthNavi.nextButton;
@@ -170,7 +177,7 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     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, 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')));
+    }, prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _emotion.jsx)("span", null, (0, _emotion.jsx)("div", null, visibleMonth.format('MMMM')), (0, _emotion.jsx)("div", null, visibleMonth.format('YYYY'))), nextButton && cloneButton(nextButton, this.handleMonthChange('next')));
   }
   renderBody() {
     return (0, _emotion.jsx)("table", {
@@ -272,12 +279,12 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
   renderDefaultdays() {
     const selectedDate = this.props.selectedDate;
     const _this$state = this.state,
-      renderedDate = _this$state.renderedDate,
+      visibleMonth = _this$state.visibleMonth,
       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 currDate = _DateTime.DateTime.getFirstDayOfWeek(visibleMonth.clone().startOf('month'));
     const arr = [];
     for (let i = 0; i < Calendar.DAY_COUNT; i++) {
       arr.push(currDate.clone());
@@ -292,7 +299,7 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
         date: dateStr,
         isSelected: selectedDate ? date.isSame(selectedDate, 'day') : false,
         isToday: date.isSame(today, 'day'),
-        isOutsideMonth: !date.isSame(renderedDate, 'month'),
+        isOutsideMonth: !date.isSame(visibleMonth, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
         onClick: this.handleDayClick,

package/lib/Calendar/props.js

@@ -47,6 +47,7 @@ const propTypes = exports.propTypes = {
   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
+  timezone: _propTypes.default.string,
+  visibleMonth: _propTypes.default.string
 };
-const allowedProps = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone'];
+const allowedProps = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];

package/package.json

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

package/src/Calendar/README.md

@@ -14,46 +14,39 @@ to the `Calendar` component.
 ---
 type: example
 ---
-<Calendar  locale="hu"/>
+<Calendar/>
 ```
 
 ### Default config with additional props
 
-- ```js
-  class Example extends React.Component {
-    state = {
-      selectedDate: ''
+```js
+---
+type: example
+---
+class Example extends React.Component {
+  state = {
+      selectedDate: "",
+      visibleMonth:"2025-05"
     }
-    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)
-        }}
-      />
-    )
+  setVisibleMonth = () => {
+    this.setState({visibleMonth: "2028-09"})
   }
-  render(<Example />)
-  ```
+  render = () =>
+<Calendar
+  visibleMonth={this.state.visibleMonth}
+  currentDate="2023-12-15"
+  disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
+  selectedDate={this.state.selectedDate}
+  onRequestRenderNextMonth={(_e, requestedMonth) => this.setState({visibleMonth: requestedMonth})}
+  onRequestRenderPrevMonth={(_e, requestedMonth) => this.setState({visibleMonth: requestedMonth})}
+  onDateSelected={(date)=>{
+    this.setState({selectedDate: date})
+  }}
+/>
+}
+render(<Example />)
+```
 
 ### Composing a Calendar in your Application
 

package/src/Calendar/index.tsx

@@ -109,7 +109,8 @@ class Calendar extends Component<CalendarProps, CalendarState> {
 
     const isUpdated =
       prevProps.locale !== this.props.locale ||
-      prevProps.timezone !== this.props.timezone
+      prevProps.timezone !== this.props.timezone ||
+      prevProps.visibleMonth !== this.props.visibleMonth
 
     if (isUpdated) {
       this.setState(() => {
@@ -124,18 +125,18 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     }
   }
 
-  calculateState = (
-    locale: string,
-    timezone: string,
-    currentDate?: string
-  ) => ({
-    renderedDate: currentDate
-      ? DateTime.parse(currentDate, locale, timezone)
-      : DateTime.now(locale, timezone),
-    today: currentDate
-      ? DateTime.parse(currentDate, locale, timezone)
-      : DateTime.now(locale, timezone)
-  })
+  calculateState = (locale: string, timezone: string, currentDate?: string) => {
+    const visibleMonth = this.props.visibleMonth || currentDate
+
+    return {
+      visibleMonth: visibleMonth
+        ? DateTime.parse(visibleMonth, locale, timezone)
+        : DateTime.now(locale, timezone),
+      today: currentDate
+        ? DateTime.parse(currentDate, locale, timezone)
+        : DateTime.now(locale, timezone)
+    }
+  }
 
   get role() {
     return this.props.role === 'listbox' ? this.props.role : undefined
@@ -172,27 +173,33 @@ class Calendar extends Component<CalendarProps, CalendarState> {
 
   handleMonthChange = (direction: 'prev' | 'next') => (e: React.MouseEvent) => {
     const { onRequestRenderNextMonth, onRequestRenderPrevMonth } = this.props
-    const { renderedDate } = this.state
-    const newDate = renderedDate.clone()
+    const { visibleMonth } = this.state
+    const newDate = visibleMonth.clone()
     if (direction === 'prev') {
       if (onRequestRenderPrevMonth) {
-        onRequestRenderPrevMonth(e)
+        onRequestRenderPrevMonth(
+          e,
+          newDate.subtract({ months: 1 }).format('YYYY-MM')
+        )
         return
       }
       newDate.subtract({ months: 1 })
     } else {
       if (onRequestRenderNextMonth) {
-        onRequestRenderNextMonth(e)
+        onRequestRenderNextMonth(
+          e,
+          newDate.add({ months: 1 }).format('YYYY-MM')
+        )
         return
       }
       newDate.add({ months: 1 })
     }
-    this.setState({ renderedDate: newDate })
+    this.setState({ visibleMonth: newDate })
   }
 
   renderHeader() {
     const { renderNavigationLabel, styles } = this.props
-    const { renderedDate } = this.state
+    const { visibleMonth } = this.state
     const { prevButton, nextButton } = this.renderMonthNavigationButtons()
 
     const cloneButton = (
@@ -218,8 +225,8 @@ class Calendar extends Component<CalendarProps, CalendarState> {
           callRenderProp(renderNavigationLabel)
         ) : (
           <span>
-            <div>{renderedDate.format('MMMM')}</div>
-            <div>{renderedDate.format('YYYY')}</div>
+            <div>{visibleMonth.format('MMMM')}</div>
+            <div>{visibleMonth.format('YYYY')}</div>
           </span>
         )}
         {nextButton && cloneButton(nextButton, this.handleMonthChange('next'))}
@@ -376,12 +383,12 @@ class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderDefaultdays() {
     const { selectedDate } = this.props
-    const { renderedDate, today } = this.state
+    const { visibleMonth, today } = this.state
     // 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.getFirstDayOfWeek(
-      renderedDate.clone().startOf('month')
+      visibleMonth.clone().startOf('month')
     )
     const arr: Moment[] = []
     for (let i = 0; i < Calendar.DAY_COUNT; i++) {
@@ -396,7 +403,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
           date={dateStr}
           isSelected={selectedDate ? date.isSame(selectedDate, 'day') : false}
           isToday={date.isSame(today, 'day')}
-          isOutsideMonth={!date.isSame(renderedDate, 'month')}
+          isOutsideMonth={!date.isSame(visibleMonth, 'month')}
           label={date.format('D MMMM YYYY')} // used by screen readers
           onClick={this.handleDayClick}
           interaction={this.isDisabledDate(date) ? 'disabled' : 'enabled'}