Adding optional custom DateHeader component for month

Author: andresgutgon

src/Calendar.js

@@ -131,7 +131,6 @@ class Calendar extends React.Component {
     * ```
     */
    onSelecting: PropTypes.func,
-     
    /**
     * The selected event, if any.
     */
@@ -420,6 +419,7 @@ class Calendar extends React.Component {
      }),
      month: PropTypes.shape({
        header: elementType,
+       dateHeader: elementType,
        event: elementType
      })
    }),

src/DateContentRow.js

@@ -104,6 +104,8 @@ class DateContentRow extends React.Component {
       date,
       key: `header_${index}`,
       style: segStyle(1, range.length),
+      isFirstInRange: index === 0,
+      isLastInRange: index === range.length - 1,
       className: cn(
         'rbc-date-cell',
         dates.eq(date, this.props.now, 'day') && 'rbc-now', // FIXME use props.now

src/DateHeader.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react'
+
+const DateHeader = ({ label, drillDownView, onDrillDown }) => {
+    if (!drillDownView) {
+      return (<span>{label}</span>)
+    }
+
+    return (
+      <a href="#" onClick={onDrillDown}>
+        {label}
+      </a>
+    )
+}
+
+DateHeader.propTypes = {
+  label: PropTypes.node,
+  date: PropTypes.instanceOf(Date),
+  drillDownView: PropTypes.string,
+  onDrillDown: PropTypes.func,
+  isFirstInRange: PropTypes.bool,
+  isLastInRange: PropTypes.bool,
+  isOffRange: PropTypes.bool,
+  isCurrent: PropTypes.bool
+}
+
+export default DateHeader

src/Month.js

@@ -16,6 +16,7 @@ import Popup from './Popup'
 import Overlay from 'react-overlays/lib/Overlay'
 import DateContentRow from './DateContentRow'
 import Header from './Header'
+import DateHeader from './DateHeader'
 
 import { accessor, dateFormat } from './utils/propTypes'
 import { segStyle, inRange, sortEvents } from './utils/eventLevels'
@@ -193,7 +194,7 @@ class MonthView extends React.Component {
     )
   }
 
-  readerDateHeading = ({ date, className, ...props }) => {
+  readerDateHeading = ({ date, className, isFirstInRange, isLastInRange, ...props }) => {
     let {
       date: currentDate,
       getDrilldownView,
@@ -205,6 +206,7 @@ class MonthView extends React.Component {
     let isCurrent = dates.eq(date, currentDate, 'day')
     let drilldownView = getDrilldownView(date)
     let label = localizer.format(date, dateFormat, culture)
+    let DateHeaderComponent = this.props.components.dateHeader || DateHeader
 
     return (
       <div
@@ -215,16 +217,15 @@ class MonthView extends React.Component {
           isCurrent && 'rbc-current'
         )}
       >
-        {drilldownView
-          ? <a
-              href="#"
-              onClick={e => this.handleHeadingClick(date, drilldownView, e)}
-            >
-              {label}
-            </a>
-          : <span>
-              {label}
-            </span>}
+        <DateHeaderComponent
+          label={label}
+          date={date}
+          drilldownView={drilldownView}
+          isFirstInRange={isFirstInRange}
+          isLastInRange={isLastInRange}
+          isOffRange={isOffRange}
+          isCurrent={isCurrent}
+          onDrillDown={e => this.handleHeadingClick(date, drilldownView, e)} />
       </div>
     )
   }

stories/Calendar.js

@@ -261,6 +261,21 @@ storiesOf('module.Calendar.week', module)
       </div>
     )
   })
+  .add('add custom date header', () => {
+    return (
+        <div style={{height: 600}}>
+          <Calendar
+            defaultView={Calendar.Views.MONTH}
+            events={events}
+            components={{
+              month: {
+                dateHeader: ({ label }) => <span>{label} - Custom date header</span>
+              }
+            }}
+          />
+        </div>
+    )
+  })
   .add('no duration', () => {
     return (
       <div style={{height: 600}}>