Merge pull request #483 from hypeserver/custom-day-content-renderer

Add support for customising the DayCell

Author: kamyar

src/components/DateRangePicker/README.md

@@ -122,4 +122,70 @@ const [state, setState] = useState([
     nextButton: "next month button",
   }}
 />;
-```
+```
+
+#### Example: Custom Day Cell Content
+Show orange dot only for weekend
+
+```jsx inside Markdown
+import { addDays, format, isWeekend } from 'date-fns';
+import { useState } from 'react';
+
+const [state, setState] = useState([
+  {
+    startDate: addDays(new Date(), -6),
+    endDate: new Date(),
+    key: 'selection1'
+  },
+  {
+    startDate: addDays(new Date(), 1),
+    endDate: addDays(new Date(), 7),
+    key: 'selection2'
+  }
+]);
+
+function customDayContent(day) {
+  extraDot = null;
+  if (isWeekend(day)) {
+    extraDot = (
+      <div
+        style={{
+          height: "5px",
+          width: "5px",
+          borderRadius: "100%",
+          background: "orange",
+          position: "absolute",
+          top: 2,
+          right: 2,
+        }}
+      />
+    )
+  }
+  return (
+    <div>
+      {extraDot}
+      <span>{format(day, "d")}</span>
+    </div>
+  )
+}
+
+<DateRangePicker
+  onChange={item => setState([item.selection])}
+  showSelectionPreview={true}
+  moveRangeOnFirstSelection={false}
+  months={2}
+  ranges={state}
+  direction="horizontal"
+  dayContentRenderer={customDayContent}
+  ariaLabels={{
+    dateInput: {
+      selection1: { startDate: "start date input of selction 1", endDate: "end date input of selction 1" },
+      selection2: { startDate: "start date input of selction 2", endDate: "end date input of selction 2" }
+    },
+    monthPicker: "month picker",
+    yearPicker: "year picker",
+    prevButton: "previous month button",
+    nextButton: "next month button",
+  }}
+/>;
+```

src/components/DayCell/index.js

@@ -149,7 +149,9 @@ class DayCell extends Component {
       />
     ));
   };
+
   render() {
+    const { dayContentRenderer } = this.props;
     return (
       <button
         type="button"
@@ -168,7 +170,10 @@ class DayCell extends Component {
         {this.renderSelectionPlaceholders()}
         {this.renderPreviewPlaceholder()}
         <span className={this.props.styles.dayNumber}>
-          <span>{format(this.props.day, this.props.dayDisplayFormat)}</span>
+          {
+            dayContentRenderer?.(this.props.day) ||
+            <span>{format(this.props.day, this.props.dayDisplayFormat)}</span>
+          }
         </span>
       </button>
     );
@@ -213,6 +218,7 @@ DayCell.propTypes = {
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,
   onMouseEnter: PropTypes.func,
+  dayContentRenderer: PropTypes.func,
 };
 
 export default DayCell;