diff --git a/README.md b/README.md
index 27bc4ae3f..a6207a4f3 100644
--- a/README.md
+++ b/README.md
@@ -128,6 +128,8 @@ preview(DateRange) | Object | | displays a
showPreview(DateRange) | bool | true | visibility of preview
editableDateInputs(Calendar) | bool | false | whether dates can be edited in the Calendar's input fields
dragSelectionEnabled(Calendar) | bool | true | whether dates can be selected via drag n drop
+calendarFocus(Calendar) | String | 'forwards' | Whether calendar focus month should be forward-driven or backwards-driven. can be 'forwards' or 'backwards'
+preventSnapRefocus(Calendar) | bool | false | prevents unneceessary refocus of shown range on selection
onPreviewChange(DateRange) | Object | | Callback function for preview changes
dateDisplayFormat | String | `MMM d, yyyy` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
dayDisplayFormat | String | `d` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js
index 22541d56b..73b9faa48 100644
--- a/src/components/Calendar/index.js
+++ b/src/components/Calendar/index.js
@@ -9,6 +9,7 @@ import ReactList from 'react-list';
import { shallowEqualObjects } from 'shallow-equal';
import {
addMonths,
+ subMonths,
format,
eachDayOfInterval,
startOfWeek,
@@ -77,6 +78,14 @@ class Calendar extends PureComponent {
}
focusToDate = (date, props = this.props, preventUnnecessary = true) => {
if (!props.scroll.enabled) {
+ if (preventUnnecessary && props.preventSnapRefocus) {
+ const focusedDateDiff = differenceInCalendarMonths(date, this.state.focusedDate);
+ const isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0;
+ const isAllowedBackward = props.calendarFocus === 'backwards' && focusedDateDiff <= 0;
+ if ((isAllowedForward || isAllowedBackward) && Math.abs(focusedDateDiff) < props.months) {
+ return;
+ }
+ }
this.setState({ focusedDate: date });
return;
}
@@ -484,7 +493,10 @@ class Calendar extends PureComponent {
isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
)}>
{new Array(this.props.months).fill(null).map((_, i) => {
- const monthStep = addMonths(this.state.focusedDate, i);
+ let monthStep = addMonths(this.state.focusedDate, i);;
+ if (this.props.calendarFocus === 'backwards') {
+ monthStep = subMonths(this.state.focusedDate, this.props.months - 1 - i);
+ }
return (
;
```
+#### Example: Backwards 2 Month View with preventSnapRefocus
+
+```jsx inside Markdown
+import { addDays } from 'date-fns';
+import { useState } from 'react';
+
+const [state, setState] = useState([
+ {
+ startDate: new Date(),
+ endDate: addDays(new Date(), 7),
+ key: 'selection'
+ }
+]);
+
+ setState([item.selection])}
+ showSelectionPreview={true}
+ moveRangeOnFirstSelection={false}
+ months={2}
+ ranges={state}
+ direction="horizontal"
+ preventSnapRefocus={true}
+ calendarFocus="backwards"
+/>;
+```
+
#### Example: Vertical Infinite
```jsx inside Markdown