Merge pull request #402 from andresgutgon/feature/custom-date-header

Adding optional custom DateHeader component for month view

.gitignore

@@ -30,3 +30,6 @@ node_modules
 
 # Webstorm ide files
 .idea
+
+# Mac OS X
+.DS_Store

src/BackgroundCells.js

@@ -62,7 +62,11 @@ class BackgroundCells extends React.Component {
         {range.map((date, index) => {
           let selected =  selecting && index >= startIdx && index <= endIdx;
           return (
-            <Wrapper key={index} value={date}>
+            <Wrapper
+              key={index}
+              value={date}
+              range={range}
+            >
               <div
                 style={segStyle(1, range.length)}
                 className={cn(

src/BackgroundWrapper.js

@@ -1,9 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class BackgroundWrapper extends React.Component {
   render() {
     return this.props.children;
   }
 }
 
+BackgroundWrapper.propTypes = {
+  children: PropTypes.element,
+  value: PropTypes.instanceOf(Date),
+  range: PropTypes.arrayOf(PropTypes.instanceOf(Date))
+}
+
 export default BackgroundWrapper;

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/DateHeader.js

@@ -0,0 +1,24 @@
+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,
+  isOffRange: 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'
@@ -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,12 @@ 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}
+          isOffRange={isOffRange}
+          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}}>