Add timeGutterHeaderComponent

Closes jquense#853
onlicar · Jun 13, 2018 · 8a8e8ea · 8a8e8ea
1 parent b2aab5d
commit 8a8e8ea
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/examples/demos/customView.js b/examples/demos/customView.js
@@ -52,6 +52,9 @@ let CustomView = () => (
     defaultView="week"
     defaultDate={new Date(2015, 3, 1)}
     views={{ month: true, week: MyWeek }}
+    components={{
+      timeGutterHeader: <p>Custom gutter text</p>,
+    }}
   />
 )
 

diff --git 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
@@ -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,
     } = 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 }}>
+          {timeGutterHeaderComponent}
+        </div>
 
         <div className="rbc-time-header-content">
           <div className="rbc-row rbc-time-header-cell">