feat: calendar add prop for custom date render

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}
       />
     </div>
   )
@@ -64,5 +66,6 @@ Calendar.propTypes = {
   onDayHover: func,
   onDayClick: func,
   weekdayFormat: string,
-  touchDragEnabled: bool
+  touchDragEnabled: bool,
+  renderDay: func
 }

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 = (
     <span
-      className={classNames('nice-dates-day', dayClassNames)}
+      className={rootClassName}
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -60,6 +63,26 @@ export default function CalendarDay({
       <span className='nice-dates-day_date'>{dayOfMonth}</span>
     </span>
   )
+
+  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
 }

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 = {

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
 }