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 | | +| 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