feat: add timeGutterHeaderComponent (#874)

* Add timeGutterHeaderComponent
Closes jquense/react-big-calendar#853

* Make timeGutter component option act the same as other component options

* Add story for timeGutterHeader

* Add timeGutterHeader to Calendar propTypes

src/Calendar.js

@@ -646,6 +646,7 @@ class Calendar extends React.Component {
       eventWrapper: elementType,
       dayWrapper: elementType,
       dateCellWrapper: elementType,
+      timeGutterHeader: elementType,
 
       toolbar: elementType,
 

src/TimeGrid.js

@@ -272,6 +272,7 @@ export default class TimeGrid extends Component {
           eventComponent={components.event}
           eventWrapperComponent={components.eventWrapper}
           dateCellWrapperComponent={components.dateCellWrapper}
+          timeGutterHeaderComponent={components.timeGutterHeader}
           onSelectSlot={this.handleSelectAllDaySlot}
           onSelectEvent={this.handleSelectAlldayEvent}
           onDoubleClickEvent={this.props.onDoubleClickEvent}

src/TimeGridHeader.js

@@ -45,6 +45,7 @@ class TimeGridHeader extends React.Component {
     eventComponent: elementType,
     eventWrapperComponent: elementType.isRequired,
     dateCellWrapperComponent: elementType,
+    timeGutterHeaderComponent: elementType,
 
     onSelectSlot: PropTypes.func,
     onSelectEvent: PropTypes.func,
@@ -148,6 +149,7 @@ class TimeGridHeader extends React.Component {
       eventComponent,
       dateCellWrapperComponent,
       eventWrapperComponent,
+      timeGutterHeaderComponent: TimeGutterHeader,
     } = this.props
 
     let style = {}
@@ -161,7 +163,9 @@ class TimeGridHeader extends React.Component {
         style={style}
         className={cn('rbc-time-header', isOverflowing && 'rbc-overflowing')}
       >
-        <div className="rbc-label rbc-time-header-gutter" style={{ width }} />
+        <div className="rbc-label rbc-time-header-gutter" style={{ width }}>
+          {TimeGutterHeader && <TimeGutterHeader />}
+        </div>
 
         <div className="rbc-time-header-content">
           <div className="rbc-row rbc-time-header-cell">

stories/Calendar.js

@@ -655,3 +655,22 @@ storiesOf('module.Calendar.week', module)
       </div>
     )
   })
+  .add('custom time gutter header', () => {
+    const TimeGutter = () => <p>Custom gutter text</p>
+
+    return (
+      <div style={{ height: 600 }}>
+        <Calendar
+          popup
+          events={demoEvents}
+          onSelectEvent={action('event selected')}
+          defaultDate={new Date(2015, 3, 1)}
+          defaultView="week"
+          views={['week', 'day']}
+          components={{
+            timeGutterHeader: TimeGutter,
+          }}
+        />
+      </div>
+    )
+  })