@instructure/ui-calendar 9.0.2-snapshot-20 → 9.0.2-snapshot-25

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.0.2-snapshot-20](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-20) (2024-06-13)
+## [9.0.2-snapshot-25](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-25) (2024-06-14)
 
-**Note:** Version bump only for package @instructure/ui-calendar
+
+### Features
+
+* **shared-types,ui-calendar,ui-select:** add yearpicker functionality to calendar ([2c0c6e0](https://github.com/instructure/instructure-ui/commit/2c0c6e081d96fc821c1296df5c4f1fba9a8c162c))
 
 
 

package/es/Calendar/index.js

@@ -40,6 +40,7 @@ import { Day } from './Day';
 import { propTypes, allowedProps } from './props';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconArrowOpenStartSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
+import { SimpleSelect } from '@instructure/ui-simple-select';
 
 /**
 ---
@@ -98,6 +99,9 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       const visibleMonth = this.state.visibleMonth;
       const newDate = visibleMonth.clone();
       if (direction === 'prev') {
+        if (!this.hasPrevMonth) {
+          return;
+        }
         if (onRequestRenderPrevMonth) {
           onRequestRenderPrevMonth(e, newDate.subtract({
             months: 1
@@ -108,6 +112,9 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
           months: 1
         });
       } else {
+        if (!this.hasNextMonth) {
+          return;
+        }
         if (onRequestRenderNextMonth) {
           onRequestRenderNextMonth(e, newDate.add({
             months: 1
@@ -122,6 +129,19 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         visibleMonth: newDate
       });
     };
+    this.handleYearChange = (e, year) => {
+      const withYearPicker = this.props.withYearPicker;
+      const visibleMonth = this.state.visibleMonth;
+      const newDate = visibleMonth.clone();
+      if (withYearPicker !== null && withYearPicker !== void 0 && withYearPicker.onRequestYearChange) {
+        withYearPicker.onRequestYearChange(e, year);
+        return;
+      }
+      newDate.year(year);
+      this.setState({
+        visibleMonth: newDate
+      });
+    };
     // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
     this.handleDayClick = (event, {
       date
@@ -152,10 +172,21 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   get role() {
     return this.props.role === 'listbox' ? this.props.role : void 0;
   }
+  get hasPrevMonth() {
+    return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().subtract({
+      months: 1
+    }).format('YYYY')) >= this.props.withYearPicker.startYear;
+  }
+  get hasNextMonth() {
+    return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().add({
+      months: 1
+    }).format('YYYY')) <= this.props.withYearPicker.endYear;
+  }
   renderHeader() {
     const _this$props5 = this.props,
       renderNavigationLabel = _this$props5.renderNavigationLabel,
-      styles = _this$props5.styles;
+      styles = _this$props5.styles,
+      withYearPicker = _this$props5.withYearPicker;
     const visibleMonth = this.state.visibleMonth;
     const _this$renderMonthNavi = this.renderMonthNavigationButtons(),
       prevButton = _this$renderMonthNavi.prevButton,
@@ -164,9 +195,31 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       onClick: 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 jsx("div", {
+    const yearList = [];
+    if (withYearPicker) {
+      const startYear = withYearPicker.startYear,
+        endYear = withYearPicker.endYear;
+      for (let year = endYear; year >= startYear; year--) {
+        yearList.push(year);
+      }
+    }
+    return jsx("div", null, jsx("div", {
       css: style
-    }, 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')));
+    }, prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : jsx("span", null, jsx("div", null, visibleMonth.format('MMMM')), !withYearPicker ? jsx("div", null, visibleMonth.format('YYYY')) : null), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))), withYearPicker ? jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.yearPicker
+    }, jsx(SimpleSelect, {
+      width: "90px",
+      renderLabel: "",
+      assistiveText: withYearPicker.screenReaderLabel,
+      value: Number(visibleMonth.format('YYYY')),
+      onChange: (e, {
+        value
+      }) => this.handleYearChange(e, Number(value))
+    }, yearList.map(year => jsx(SimpleSelect.Option, {
+      key: year,
+      id: `opt-${year}`,
+      value: year
+    }, `${year}`)))) : null);
   }
   renderBody() {
     return jsx("table", {

package/es/Calendar/props.js

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

package/es/Calendar/styles.js

@@ -30,7 +30,8 @@
  * @param  {Object} componentTheme The theme variable object.
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, props) => {
+  const withYearPicker = props.withYearPicker;
   return {
     navigation: {
       label: 'calendar__navigation',
@@ -40,7 +41,7 @@ const generateStyle = componentTheme => {
       fontFamily: componentTheme.fontFamily,
       fontSize: componentTheme.fontSize,
       fontWeight: componentTheme.fontWeight,
-      marginBottom: componentTheme.navMargin
+      marginBottom: withYearPicker ? componentTheme.navWithYearMargin : componentTheme.navMargin
     },
     navigationWithButtons: {
       label: 'calendar__navigation--withButtons',
@@ -52,6 +53,12 @@ const generateStyle = componentTheme => {
       label: 'calendar__weekdayHeader',
       textAlign: 'center',
       maxWidth: componentTheme.maxHeaderWidth
+    },
+    yearPicker: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: componentTheme.yearPickerMargin
     }
   };
 };

package/es/Calendar/theme.js

@@ -44,6 +44,8 @@ const generateComponentTheme = theme => {
     color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    navWithYearMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    yearPickerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.mediumSmall,
     maxHeaderWidth: spacing === null || spacing === void 0 ? void 0 : spacing.medium
   };
   return {

package/lib/Calendar/index.js

@@ -27,6 +27,7 @@ var _props = require("./props");
 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 _SimpleSelect = require("@instructure/ui-simple-select/lib/SimpleSelect");
 var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
 /*
  * The MIT License (MIT)
@@ -109,6 +110,9 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
       const visibleMonth = this.state.visibleMonth;
       const newDate = visibleMonth.clone();
       if (direction === 'prev') {
+        if (!this.hasPrevMonth) {
+          return;
+        }
         if (onRequestRenderPrevMonth) {
           onRequestRenderPrevMonth(e, newDate.subtract({
             months: 1
@@ -119,6 +123,9 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
           months: 1
         });
       } else {
+        if (!this.hasNextMonth) {
+          return;
+        }
         if (onRequestRenderNextMonth) {
           onRequestRenderNextMonth(e, newDate.add({
             months: 1
@@ -133,6 +140,19 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
         visibleMonth: newDate
       });
     };
+    this.handleYearChange = (e, year) => {
+      const withYearPicker = this.props.withYearPicker;
+      const visibleMonth = this.state.visibleMonth;
+      const newDate = visibleMonth.clone();
+      if (withYearPicker !== null && withYearPicker !== void 0 && withYearPicker.onRequestYearChange) {
+        withYearPicker.onRequestYearChange(e, year);
+        return;
+      }
+      newDate.year(year);
+      this.setState({
+        visibleMonth: newDate
+      });
+    };
     // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
     this.handleDayClick = (event, {
       date
@@ -163,10 +183,21 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
   get role() {
     return this.props.role === 'listbox' ? this.props.role : void 0;
   }
+  get hasPrevMonth() {
+    return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().subtract({
+      months: 1
+    }).format('YYYY')) >= this.props.withYearPicker.startYear;
+  }
+  get hasNextMonth() {
+    return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().add({
+      months: 1
+    }).format('YYYY')) <= this.props.withYearPicker.endYear;
+  }
   renderHeader() {
     const _this$props5 = this.props,
       renderNavigationLabel = _this$props5.renderNavigationLabel,
-      styles = _this$props5.styles;
+      styles = _this$props5.styles,
+      withYearPicker = _this$props5.withYearPicker;
     const visibleMonth = this.state.visibleMonth;
     const _this$renderMonthNavi = this.renderMonthNavigationButtons(),
       prevButton = _this$renderMonthNavi.prevButton,
@@ -175,9 +206,31 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
       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", {
+    const yearList = [];
+    if (withYearPicker) {
+      const startYear = withYearPicker.startYear,
+        endYear = withYearPicker.endYear;
+      for (let year = endYear; year >= startYear; year--) {
+        yearList.push(year);
+      }
+    }
+    return (0, _emotion.jsx)("div", null, (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, visibleMonth.format('MMMM')), (0, _emotion.jsx)("div", null, visibleMonth.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')), !withYearPicker ? (0, _emotion.jsx)("div", null, visibleMonth.format('YYYY')) : null), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))), withYearPicker ? (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.yearPicker
+    }, (0, _emotion.jsx)(_SimpleSelect.SimpleSelect, {
+      width: "90px",
+      renderLabel: "",
+      assistiveText: withYearPicker.screenReaderLabel,
+      value: Number(visibleMonth.format('YYYY')),
+      onChange: (e, {
+        value
+      }) => this.handleYearChange(e, Number(value))
+    }, yearList.map(year => (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
+      key: year,
+      id: `opt-${year}`,
+      value: year
+    }, `${year}`)))) : null);
   }
   renderBody() {
     return (0, _emotion.jsx)("table", {

package/lib/Calendar/props.js

@@ -48,6 +48,7 @@ const propTypes = exports.propTypes = {
   role: _propTypes.default.oneOf(['table', 'listbox']),
   selectedDate: _propTypes.default.string,
   timezone: _propTypes.default.string,
-  visibleMonth: _propTypes.default.string
+  visibleMonth: _propTypes.default.string,
+  withYearPicker: _propTypes.default.object
 };
 const allowedProps = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];

package/lib/Calendar/styles.js

@@ -36,7 +36,8 @@ exports.default = void 0;
  * @param  {Object} componentTheme The theme variable object.
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, props) => {
+  const withYearPicker = props.withYearPicker;
   return {
     navigation: {
       label: 'calendar__navigation',
@@ -46,7 +47,7 @@ const generateStyle = componentTheme => {
       fontFamily: componentTheme.fontFamily,
       fontSize: componentTheme.fontSize,
       fontWeight: componentTheme.fontWeight,
-      marginBottom: componentTheme.navMargin
+      marginBottom: withYearPicker ? componentTheme.navWithYearMargin : componentTheme.navMargin
     },
     navigationWithButtons: {
       label: 'calendar__navigation--withButtons',
@@ -58,6 +59,12 @@ const generateStyle = componentTheme => {
       label: 'calendar__weekdayHeader',
       textAlign: 'center',
       maxWidth: componentTheme.maxHeaderWidth
+    },
+    yearPicker: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: componentTheme.yearPickerMargin
     }
   };
 };

package/lib/Calendar/theme.js

@@ -50,6 +50,8 @@ const generateComponentTheme = theme => {
     color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    navWithYearMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    yearPickerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.mediumSmall,
     maxHeaderWidth: spacing === null || spacing === void 0 ? void 0 : spacing.medium
   };
   return {

package/package.json

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

package/src/Calendar/README.md

@@ -48,6 +48,43 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
+### With year picker
+
+```js
+---
+type: example
+---
+class Example extends React.Component {
+  state = {
+      selectedDate: "",
+      visibleMonth:"2024-02"
+    }
+
+  setVisibleMonth = () => {
+    this.setState({visibleMonth: "2028-09"})
+  }
+  render = () =>
+<Calendar
+  visibleMonth={this.state.visibleMonth}
+  currentDate="2024-02-29"
+  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})
+  }}
+  withYearPicker={{
+    screenReaderLabel: "Year picker",
+    startYear:1999,
+    endYear:2024,
+    maxHeight: "200px"
+  }}
+/>
+}
+render(<Example />)
+```
+
 ### Composing a Calendar in your Application
 
 By design, the `Calendar` component does not dictate which date libraries or

package/src/Calendar/index.tsx

@@ -58,6 +58,8 @@ import {
   IconArrowOpenEndSolid
 } from '@instructure/ui-icons'
 
+import { SimpleSelect } from '@instructure/ui-simple-select'
+
 /**
 ---
 category: components
@@ -142,6 +144,26 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     return this.props.role === 'listbox' ? this.props.role : undefined
   }
 
+  get hasPrevMonth() {
+    return (
+      !this.props.withYearPicker ||
+      (this.props.withYearPicker &&
+        Number(
+          this.state.visibleMonth.clone().subtract({ months: 1 }).format('YYYY')
+        ) >= this.props.withYearPicker.startYear)
+    )
+  }
+
+  get hasNextMonth() {
+    return (
+      !this.props.withYearPicker ||
+      (this.props.withYearPicker &&
+        Number(
+          this.state.visibleMonth.clone().add({ months: 1 }).format('YYYY')
+        ) <= this.props.withYearPicker.endYear)
+    )
+  }
+
   renderMonthNavigationButtons = () => {
     const { renderNextMonthButton, renderPrevMonthButton } = this.props
 
@@ -176,6 +198,9 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     const { visibleMonth } = this.state
     const newDate = visibleMonth.clone()
     if (direction === 'prev') {
+      if (!this.hasPrevMonth) {
+        return
+      }
       if (onRequestRenderPrevMonth) {
         onRequestRenderPrevMonth(
           e,
@@ -185,6 +210,9 @@ class Calendar extends Component<CalendarProps, CalendarState> {
       }
       newDate.subtract({ months: 1 })
     } else {
+      if (!this.hasNextMonth) {
+        return
+      }
       if (onRequestRenderNextMonth) {
         onRequestRenderNextMonth(
           e,
@@ -197,8 +225,23 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     this.setState({ visibleMonth: newDate })
   }
 
+  handleYearChange = (
+    e: React.SyntheticEvent<Element, Event>,
+    year: number
+  ) => {
+    const { withYearPicker } = this.props
+    const { visibleMonth } = this.state
+    const newDate = visibleMonth.clone()
+    if (withYearPicker?.onRequestYearChange) {
+      withYearPicker.onRequestYearChange(e, year)
+      return
+    }
+    newDate.year(year)
+    this.setState({ visibleMonth: newDate })
+  }
+
   renderHeader() {
-    const { renderNavigationLabel, styles } = this.props
+    const { renderNavigationLabel, styles, withYearPicker } = this.props
     const { visibleMonth } = this.state
     const { prevButton, nextButton } = this.renderMonthNavigationButtons()
 
@@ -218,18 +261,59 @@ class Calendar extends Component<CalendarProps, CalendarState> {
       ...(prevButton || nextButton ? [styles?.navigationWithButtons] : [])
     ]
 
+    const yearList: number[] = []
+
+    if (withYearPicker) {
+      const { startYear, endYear } = withYearPicker
+      for (let year = endYear; year >= startYear!; year--) {
+        yearList.push(year)
+      }
+    }
+
     return (
-      <div css={style}>
-        {prevButton && cloneButton(prevButton, this.handleMonthChange('prev'))}
-        {renderNavigationLabel ? (
-          callRenderProp(renderNavigationLabel)
-        ) : (
-          <span>
-            <div>{visibleMonth.format('MMMM')}</div>
-            <div>{visibleMonth.format('YYYY')}</div>
-          </span>
-        )}
-        {nextButton && cloneButton(nextButton, this.handleMonthChange('next'))}
+      <div>
+        <div css={style}>
+          {prevButton &&
+            cloneButton(prevButton, this.handleMonthChange('prev'))}
+          {renderNavigationLabel ? (
+            callRenderProp(renderNavigationLabel)
+          ) : (
+            <span>
+              <div>{visibleMonth.format('MMMM')}</div>
+              {!withYearPicker ? (
+                <div>{visibleMonth.format('YYYY')}</div>
+              ) : null}
+            </span>
+          )}
+          {nextButton &&
+            cloneButton(nextButton, this.handleMonthChange('next'))}
+        </div>
+
+        {withYearPicker ? (
+          <div css={styles?.yearPicker}>
+            <SimpleSelect
+              width="90px"
+              renderLabel=""
+              assistiveText={withYearPicker.screenReaderLabel}
+              value={Number(visibleMonth.format('YYYY'))}
+              onChange={(
+                e: React.SyntheticEvent<Element, Event>,
+                {
+                  value
+                }: {
+                  value?: string | number | undefined
+                  id?: string | undefined
+                }
+              ) => this.handleYearChange(e, Number(value))}
+            >
+              {yearList.map((year) => (
+                <SimpleSelect.Option key={year} id={`opt-${year}`} value={year}>
+                  {`${year}`}
+                </SimpleSelect.Option>
+              ))}
+            </SimpleSelect>
+          </div>
+        ) : null}
       </div>
     )
   }

package/src/Calendar/props.ts

@@ -152,6 +152,24 @@ type CalendarOwnProps = {
    * Visible month for the rendered calendar. Formatted as an ISO date string.
    */
   visibleMonth?: string
+
+  /**
+   * If set, years can be picked from a dropdown.
+   * It accepts an object.
+   * screenReaderLabel: string // e.g.: i18n("pick a year")
+   *
+   * onRequestYearChange?:(e: React.MouseEvent,requestedYear: number): void // if set, on year change, only this will be called and no internal change will take place
+   *
+   * startYear: number // e.g.: 2001, sets the start year of the selectable list
+   *
+   * endYear: number // e.g.: 2030, sets the end year of the selectable list
+   */
+  withYearPicker?: {
+    screenReaderLabel: string
+    onRequestYearChange?: (e: any, requestedYear: number) => void
+    startYear: number
+    endYear: number
+  }
 }
 
 type PropKeys = keyof CalendarOwnProps
@@ -163,7 +181,7 @@ type CalendarProps = CalendarOwnProps &
   OtherHTMLAttributes<CalendarOwnProps>
 
 type CalendarStyle = ComponentStyle<
-  'navigation' | 'navigationWithButtons' | 'weekdayHeader'
+  'navigation' | 'navigationWithButtons' | 'weekdayHeader' | 'yearPicker'
 >
 
 const propTypes: PropValidators<PropKeys> = {
@@ -184,7 +202,8 @@ const propTypes: PropValidators<PropKeys> = {
   role: PropTypes.oneOf(['table', 'listbox']),
   selectedDate: PropTypes.string,
   timezone: PropTypes.string,
-  visibleMonth: PropTypes.string
+  visibleMonth: PropTypes.string,
+  withYearPicker: PropTypes.object
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/Calendar/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import type { CalendarTheme } from '@instructure/shared-types'
-import type { CalendarStyle } from './props'
+import type { CalendarStyle, CalendarProps } from './props'
 
 /**
  * ---
@@ -33,7 +33,11 @@ import type { CalendarStyle } from './props'
  * @param  {Object} componentTheme The theme variable object.
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: CalendarTheme): CalendarStyle => {
+const generateStyle = (
+  componentTheme: CalendarTheme,
+  props: CalendarProps
+): CalendarStyle => {
+  const { withYearPicker } = props
   return {
     navigation: {
       label: 'calendar__navigation',
@@ -43,7 +47,9 @@ const generateStyle = (componentTheme: CalendarTheme): CalendarStyle => {
       fontFamily: componentTheme.fontFamily,
       fontSize: componentTheme.fontSize,
       fontWeight: componentTheme.fontWeight,
-      marginBottom: componentTheme.navMargin
+      marginBottom: withYearPicker
+        ? componentTheme.navWithYearMargin
+        : componentTheme.navMargin
     },
     navigationWithButtons: {
       label: 'calendar__navigation--withButtons',
@@ -55,6 +61,12 @@ const generateStyle = (componentTheme: CalendarTheme): CalendarStyle => {
       label: 'calendar__weekdayHeader',
       textAlign: 'center',
       maxWidth: componentTheme.maxHeaderWidth
+    },
+    yearPicker: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: componentTheme.yearPickerMargin
     }
   }
 }