diff --git a/src/Calendar.js b/src/Calendar.js index 3150f534..c3d86161 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -18,7 +18,8 @@ export default function Calendar({ onDayHover, onDayClick, weekdayFormat, - touchDragEnabled + touchDragEnabled, + renderDay }) { const [month, setMonth] = useControllableState(receivedMonth, onMonthChange, startOfMonth(new Date())) @@ -48,6 +49,7 @@ export default function Calendar({ onDayHover={onDayHover} onDayClick={onDayClick} touchDragEnabled={touchDragEnabled} + renderDay={renderDay} /> ) @@ -64,5 +66,6 @@ Calendar.propTypes = { onDayHover: func, onDayClick: func, weekdayFormat: string, - touchDragEnabled: bool + touchDragEnabled: bool, + renderDay: func } diff --git a/src/CalendarDay.js b/src/CalendarDay.js index b02fb220..ccff2a74 100644 --- a/src/CalendarDay.js +++ b/src/CalendarDay.js @@ -21,7 +21,8 @@ export default function CalendarDay({ modifiers: receivedModifiers, modifiersClassNames: receivedModifiersClassNames, onClick, - onHover + onHover, + renderDay }) { const dayOfMonth = getDate(date) const dayClassNames = {} @@ -45,9 +46,11 @@ export default function CalendarDay({ onHover(null) } - return ( + const rootClassName = classNames('nice-dates-day', dayClassNames) + + const defaultDay = ( {dayOfMonth} ) + + const day = renderDay + ? renderDay({ + dayClassNames, + handleClick, + handleMouseEnter, + handleMouseLeave, + height, + dayOfMonth, + date, + locale, + rootClassName + }) + : defaultDay + + return ( + <> + {day} + + ) } CalendarDay.propTypes = { @@ -69,11 +92,13 @@ CalendarDay.propTypes = { modifiers: objectOf(bool), modifiersClassNames: objectOf(string), onHover: func, - onClick: func + onClick: func, + renderDay: func } CalendarDay.defaultProps = { modifiers: {}, onHover: () => {}, - onClick: () => {} + onClick: () => {}, + renderDay: null } diff --git a/src/CalendarGrid.js b/src/CalendarGrid.js index 94a4f5c1..dbc219b3 100644 --- a/src/CalendarGrid.js +++ b/src/CalendarGrid.js @@ -25,7 +25,8 @@ export default function CalendarGrid({ onDayHover, onDayClick, transitionDuration, - touchDragEnabled + touchDragEnabled, + renderDay }) { const grid = useGrid({ locale, month: startOfMonth(month), onMonthChange, transitionDuration, touchDragEnabled }) const { startDate, endDate, cellHeight, containerElementRef, isWide, offset, origin, transition } = grid @@ -48,6 +49,7 @@ export default function CalendarGrid({ modifiersClassNames={modifiersClassNames} onHover={onDayHover} onClick={onDayClick} + renderDay={renderDay} /> ) }) @@ -82,7 +84,8 @@ CalendarGrid.propTypes = { onDayHover: func, onDayClick: func, transitionDuration: number.isRequired, - touchDragEnabled: bool + touchDragEnabled: bool, + renderDay: func } CalendarGrid.defaultProps = { diff --git a/src/DatePickerCalendar.js b/src/DatePickerCalendar.js index aec742ae..d169bade 100644 --- a/src/DatePickerCalendar.js +++ b/src/DatePickerCalendar.js @@ -16,7 +16,8 @@ export default function DatePickerCalendar({ modifiers: receivedModifiers, modifiersClassNames, weekdayFormat, - touchDragEnabled + touchDragEnabled, + renderDay }) { const isSelected = date => isSameDay(date, selectedDate) && isSelectable(date, { minimumDate, maximumDate }) const modifiers = mergeModifiers({ selected: isSelected, disabled: isSelected }, receivedModifiers) @@ -38,6 +39,7 @@ export default function DatePickerCalendar({ modifiersClassNames={modifiersClassNames} weekdayFormat={weekdayFormat} touchDragEnabled={touchDragEnabled} + renderDay={renderDay} /> ) } @@ -53,5 +55,6 @@ DatePickerCalendar.propTypes = { modifiers: objectOf(func), modifiersClassNames: objectOf(string), weekdayFormat: string, - touchDragEnabled: bool + touchDragEnabled: bool, + renderDay: func }