From adc20783d114d61eb562e2cc2badaf179a6d2226 Mon Sep 17 00:00:00 2001
From: Dan Bovey <dan@danbovey.uk>
Date: Tue, 3 Jul 2018 18:17:13 +0100
Subject: [PATCH] feat: add timeGutterHeaderComponent (#874)

* Add timeGutterHeaderComponent
Closes intljusticemission/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       |  1 +
 src/TimeGrid.js       |  1 +
 src/TimeGridHeader.js |  6 +++++-
 stories/Calendar.js   | 19 +++++++++++++++++++
 4 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/Calendar.js b/src/Calendar.js
index fe8a4d218..590a299fd 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -646,6 +646,7 @@ class Calendar extends React.Component {
       eventWrapper: elementType,
       dayWrapper: elementType,
       dateCellWrapper: elementType,
+      timeGutterHeader: elementType,
 
       toolbar: elementType,
 
diff --git a/src/TimeGrid.js b/src/TimeGrid.js
index 88d83e7ee..bb727b8bb 100644
--- a/src/TimeGrid.js
+++ b/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}
diff --git a/src/TimeGridHeader.js b/src/TimeGridHeader.js
index 2f88d54a0..f7016cf57 100644
--- a/src/TimeGridHeader.js
+++ b/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">
diff --git a/stories/Calendar.js b/stories/Calendar.js
index 144c10fc0..93133d032 100644
--- a/stories/Calendar.js
+++ b/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>
+    )
+  })