From 82ae8d0f76ddbc5c642eb3864dd1998608bdbec5 Mon Sep 17 00:00:00 2001 From: "G@briel Castilho" Date: Fri, 8 Mar 2024 15:56:18 -0300 Subject: [PATCH 1/3] feat: Add support for keepRangeBoundarySelected prop -- Implemented prop 'keepBoundarySelected', enabling users to "update" a range by clicking on one of its ends --- packages/react-calendar/src/Calendar.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/react-calendar/src/Calendar.tsx b/packages/react-calendar/src/Calendar.tsx index a9aa6745..b049da7e 100644 --- a/packages/react-calendar/src/Calendar.tsx +++ b/packages/react-calendar/src/Calendar.tsx @@ -152,6 +152,10 @@ export type CalendarProps = { * @example ref */ inputRef?: React.Ref; + /** + * Whether the range should remain selected if the user clicks on one of the "range boundaries". For instance, if the user selects days 1 and 3, and subsequently clicks on day 3 again, day 1 will remain selected to "update" the range. + */ + keepBoundarySelected?: boolean; /** * Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). * @@ -615,6 +619,7 @@ const Calendar: React.ForwardRefExoticComponent Date: Fri, 8 Mar 2024 16:05:55 -0300 Subject: [PATCH 2/3] fix: CSS misbehaviors -- fix active calendar__tile with the wrong color when also hovering. This is particularly noticeable when updating a range with 'keepBoundarySelected' -- fix focused calendar__tile with the same color as a hovered tile, causing it to remain "selected" when updating a range (and in other specific cases) --- packages/react-calendar/src/Calendar.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-calendar/src/Calendar.css b/packages/react-calendar/src/Calendar.css index 9de8e2cd..715fba2c 100644 --- a/packages/react-calendar/src/Calendar.css +++ b/packages/react-calendar/src/Calendar.css @@ -118,8 +118,7 @@ color: #cdcdcd; } -.react-calendar__tile:enabled:hover, -.react-calendar__tile:enabled:focus { +.react-calendar__tile:enabled:hover { background-color: #e6e6e6; } @@ -153,4 +152,5 @@ .react-calendar--selectRange .react-calendar__tile--hover { background-color: #e6e6e6; + color: unset; } From 0f5abd4fdf3f2a6ab1051bd21d347bf13a9c739b Mon Sep 17 00:00:00 2001 From: "G@briel Castilho" Date: Fri, 8 Mar 2024 16:36:06 -0300 Subject: [PATCH 3/3] chore: Update README with the documentation for keepBoundarySelected --- packages/react-calendar/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-calendar/README.md b/packages/react-calendar/README.md index b949eaff..fd0e1b3f 100644 --- a/packages/react-calendar/README.md +++ b/packages/react-calendar/README.md @@ -107,6 +107,7 @@ Displays a complete, interactive calendar. | formatYear | Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'YYYY')` | | goToRangeStartOnSelect | Whether to go to the beginning of the range when selecting the end of the range. | `true` | `false` | | inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `
` rendered by `` component. | n/a |
  • Function:
    `(ref) => { this.myCalendar = ref; }`
  • Ref created using `createRef`:
    `this.ref = createRef();`
    …
    `inputRef={this.ref}`
  • Ref created using `useRef`:
    `const ref = useRef();`
    …
    `inputRef={ref}`
| +| keepBoundarySelected | Whether the range should remain selected if the user clicks on one of the "range boundaries". For instance, if the user selects days 1 and 3, and subsequently clicks on day 3 again, day 1 will remain selected to "update" the range. | `false` | `true` | | locale | Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | `"hu-HU"` | | maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although react-calendar will ensure that no later date is selected. | n/a | Date: `new Date()` | | maxDetail | The most detailed view that the user shall see. View defined here also becomes the one on which clicking an item will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"` | `"year"` |