diff --git a/src/components/Calendar/day.js b/src/components/Calendar/day.js index 27d01ccd9..457a60ac1 100644 --- a/src/components/Calendar/day.js +++ b/src/components/Calendar/day.js @@ -26,6 +26,7 @@ function DayComponent(props) { focusedDate, currentRange, disabledDays, + highlightedDays, privateKeyDown, privateOnFocus, privateOnBlur, @@ -40,6 +41,7 @@ function DayComponent(props) { compareDates(date, minDate) < 0 || (maxRangeEnd && compareDates(date, maxRangeEnd) > 0) || isInArray(date, disabledDays); + const isHighlighted = isInArray(date, highlightedDays); const tabIndex = isSameDay(focusedDate, date) ? 0 : -1; const buttonRef = useRef(); const isRangeStartDate = useRangeStartDate(date, currentRange); @@ -63,6 +65,7 @@ function DayComponent(props) { onBlur={privateOnBlur} role="button" aria-disabled="true" + isHighlighted={isHighlighted} > {day} @@ -94,6 +97,7 @@ function DayComponent(props) { onBlur={privateOnBlur} isWithinRange={isWithinRange} isToday={isToday} + isHighlighted={isHighlighted} > {day} diff --git a/src/components/Calendar/doubleCalendar/index.js b/src/components/Calendar/doubleCalendar/index.js index a5f770954..b775c7cd8 100644 --- a/src/components/Calendar/doubleCalendar/index.js +++ b/src/components/Calendar/doubleCalendar/index.js @@ -48,6 +48,7 @@ export default function DoubleCalendar(props) { selectedRange, selectionType, disabledDays, + highlightedDays, } = props; const currentValue = useNormalizedValue(value); const [focusedDate, setFocusedDate] = useState(currentValue); @@ -241,6 +242,7 @@ export default function DoubleCalendar(props) { selectedRange, currentRange, disabledDays, + highlightedDays, maxRangeEnd, privateOnFocus: handleOnDayFocus, privateOnBlur: handleOnDayBlur, @@ -270,6 +272,7 @@ export default function DoubleCalendar(props) { selectedRange, currentRange, disabledDays, + highlightedDays, maxRangeEnd, privateOnFocus: handleOnDayFocus, privateOnBlur: handleOnDayBlur, @@ -310,6 +313,9 @@ DoubleCalendar.propTypes = { disabledDays: PropTypes.arrayOf( PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), ), + highlightedDays: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), + ), }; DoubleCalendar.defaultProps = { @@ -324,4 +330,5 @@ DoubleCalendar.defaultProps = { selectionType: 'single', selectedRange: undefined, disabledDays: [], + highlightedDays: [], }; diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 9dfe58c64..654b39a03 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -82,6 +82,10 @@ Calendar.propTypes = { disabledDays: PropTypes.arrayOf( PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), ), + /** An array containing the days that should be highlighted with a mark. Used for example to show an indicator that there are notifications in these days. */ + highlightedDays: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), + ), }; Calendar.defaultProps = { @@ -96,4 +100,5 @@ Calendar.defaultProps = { selectionType: 'single', variant: 'single', disabledDays: [], + highlightedDays: [], }; diff --git a/src/components/Calendar/singleCalendar.js b/src/components/Calendar/singleCalendar.js index dfee07620..37473b445 100644 --- a/src/components/Calendar/singleCalendar.js +++ b/src/components/Calendar/singleCalendar.js @@ -135,7 +135,7 @@ class SingleCalendar extends Component { getContext() { const { focusedDate, currentRange, maxRangeEnd } = this.state; - const { selectionType, selectedRange, disabledDays } = this.props; + const { selectionType, selectedRange, disabledDays, highlightedDays } = this.props; return { focusedDate, useAutoFocus: this.enableNavKeys, @@ -143,6 +143,7 @@ class SingleCalendar extends Component { selectedRange, currentRange, disabledDays, + highlightedDays, maxRangeEnd, privateKeyDown: this.handleKeyDown, privateOnFocus: this.onDayFocus, @@ -385,6 +386,9 @@ SingleCalendar.propTypes = { disabledDays: PropTypes.arrayOf( PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), ), + highlightedDays: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), + ), }; SingleCalendar.defaultProps = { @@ -399,6 +403,7 @@ SingleCalendar.defaultProps = { selectionType: 'single', selectedRange: undefined, disabledDays: [], + highlightedDays: [], }; export default SingleCalendar; diff --git a/src/components/Calendar/styled/dayAdjacent.js b/src/components/Calendar/styled/dayAdjacent.js index 3796d76de..f2c11ba12 100644 --- a/src/components/Calendar/styled/dayAdjacent.js +++ b/src/components/Calendar/styled/dayAdjacent.js @@ -16,6 +16,7 @@ const StyledDayAdjacent = attachThemeAttrs(styled.span)` cursor: not-allowed; user-select: none; border-radius: 48px; + position: relative; @media (max-width: 600px) { margin: 3px auto; @@ -29,6 +30,22 @@ const StyledDayAdjacent = attachThemeAttrs(styled.span)` line-height: 36px; outline: none; } + + ${props => + props.isHighlighted && + ` + &::after { + content: ''; + height: 6px; + width: 6px; + position: absolute; + bottom: 2px; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + background-color: ${props.palette.error.main}; + } + `} `; export default StyledDayAdjacent; diff --git a/src/components/Calendar/styled/dayButton.js b/src/components/Calendar/styled/dayButton.js index 6e6501d42..1f34a9b11 100644 --- a/src/components/Calendar/styled/dayButton.js +++ b/src/components/Calendar/styled/dayButton.js @@ -114,6 +114,22 @@ const StyledDayButton = attachThemeAttrs(styled.button)` color: ${props.palette.getContrastText(props.palette.brand.main)}; background-color: ${props.palette.brand.dark}; `}; + + ${props => + props.isHighlighted && + ` + &::after { + content: ''; + height: 6px; + width: 6px; + position: absolute; + bottom: 0px; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + background-color: ${props.palette.error.main}; + } + `} `; export default StyledDayButton;