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