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"` |
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;
}
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