From 1b594d179e29962e78c11087dc6b0b8748db3d55 Mon Sep 17 00:00:00 2001
From: Aamir Jawaid <aamirj@microsoft.com>
Date: Mon, 21 Jan 2019 15:39:25 -0600
Subject: [PATCH 1/6] Add ability to add custom resource headers

---
 src/ResourceHeader.js | 20 ++++++++++++++++++++
 src/TimeGridHeader.js | 16 ++++++++++------
 2 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 src/ResourceHeader.js

diff --git a/src/ResourceHeader.js b/src/ResourceHeader.js
new file mode 100644
index 000000000..f522051d7
--- /dev/null
+++ b/src/ResourceHeader.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const ResourceHeader = ({ label, index }) => {
+  return (
+    <div className="rbc-row rbc-row-resource">
+      <div key={`resource_${index}`} className="rbc-header">
+        {label}
+      </div>
+    </div>
+  )
+}
+
+ResourceHeader.propTypes = {
+  label: PropTypes.node,
+  index: PropTypes.number,
+  resouce: PropTypes.object,
+}
+
+export default ResourceHeader
diff --git a/src/TimeGridHeader.js b/src/TimeGridHeader.js
index f06b86714..e4e724ecf 100644
--- a/src/TimeGridHeader.js
+++ b/src/TimeGridHeader.js
@@ -6,6 +6,7 @@ import React from 'react'
 import dates from './utils/dates'
 import DateContentRow from './DateContentRow'
 import Header from './Header'
+import ResourceHeader from './ResourceHeader'
 import { notify } from './utils/helpers'
 
 class TimeGridHeader extends React.Component {
@@ -116,7 +117,10 @@ class TimeGridHeader extends React.Component {
       scrollRef,
       localizer,
       isOverflowing,
-      components: { timeGutterHeader: TimeGutterHeader },
+      components: {
+        timeGutterHeader: TimeGutterHeader,
+        resourceHeader: ResourceHeaderComponent = ResourceHeader,
+      },
     } = this.props
 
     let style = {}
@@ -142,11 +146,11 @@ class TimeGridHeader extends React.Component {
         {resources.map(([id, resource], idx) => (
           <div className="rbc-time-header-content" key={id || idx}>
             {resource && (
-              <div className="rbc-row rbc-row-resource">
-                <div key={`resource_${idx}`} className="rbc-header">
-                  {accessors.resourceTitle(resource)}
-                </div>
-              </div>
+              <ResourceHeaderComponent
+                index={idx}
+                label={accessors.resourceTitle(resource)}
+                resource={resource}
+              />
             )}
             <div
               className={`rbc-row rbc-time-header-cell${

From 3a6d97233f1cae9a69c3629108af955913db3584 Mon Sep 17 00:00:00 2001
From: Aamir Jawaid <aamirj@microsoft.com>
Date: Mon, 21 Jan 2019 15:43:43 -0600
Subject: [PATCH 2/6] Fix spelling

---
 src/ResourceHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ResourceHeader.js b/src/ResourceHeader.js
index f522051d7..47b4d9c79 100644
--- a/src/ResourceHeader.js
+++ b/src/ResourceHeader.js
@@ -14,7 +14,7 @@ const ResourceHeader = ({ label, index }) => {
 ResourceHeader.propTypes = {
   label: PropTypes.node,
   index: PropTypes.number,
-  resouce: PropTypes.object,
+  resource: PropTypes.object,
 }
 
 export default ResourceHeader

From 94b0d971ff9b3891c4742256c5e3bc10b789e52c Mon Sep 17 00:00:00 2001
From: Aamir Jawaid <aamirj@microsoft.com>
Date: Mon, 21 Jan 2019 17:06:25 -0600
Subject: [PATCH 3/6] Fixes based on comments

---
 src/ResourceHeader.js   | 10 ++--------
 src/TimeGridHeader.js   | 15 ++++++++++-----
 src/less/time-grid.less |  5 +++++
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/ResourceHeader.js b/src/ResourceHeader.js
index 47b4d9c79..2b51ee669 100644
--- a/src/ResourceHeader.js
+++ b/src/ResourceHeader.js
@@ -1,14 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const ResourceHeader = ({ label, index }) => {
-  return (
-    <div className="rbc-row rbc-row-resource">
-      <div key={`resource_${index}`} className="rbc-header">
-        {label}
-      </div>
-    </div>
-  )
+const ResourceHeader = ({ label }) => {
+  return <span>{label}</span>
 }
 
 ResourceHeader.propTypes = {
diff --git a/src/TimeGridHeader.js b/src/TimeGridHeader.js
index e4e724ecf..95fba0876 100644
--- a/src/TimeGridHeader.js
+++ b/src/TimeGridHeader.js
@@ -146,11 +146,16 @@ class TimeGridHeader extends React.Component {
         {resources.map(([id, resource], idx) => (
           <div className="rbc-time-header-content" key={id || idx}>
             {resource && (
-              <ResourceHeaderComponent
-                index={idx}
-                label={accessors.resourceTitle(resource)}
-                resource={resource}
-              />
+              <div className="rbc-row rbc-row-resource">
+                <div key={`resource_${idx}`} className="rbc-header">
+                  <ResourceHeaderComponent
+                    key={idx}
+                    index={idx}
+                    label={accessors.resourceTitle(resource)}
+                    resource={resource}
+                  />
+                </div>
+              </div>
             )}
             <div
               className={`rbc-row rbc-time-header-cell${
diff --git a/src/less/time-grid.less b/src/less/time-grid.less
index 40af3598d..9fc102b56 100644
--- a/src/less/time-grid.less
+++ b/src/less/time-grid.less
@@ -94,6 +94,11 @@
     border-left-width: 0;
     border-right: 1px solid @cell-border;
   }
+
+  >.rbc-row.rbc-row-resource {
+      border-bottom: 1px solid @cell-border;
+      flex-shrink: 0;
+  }
 }
 
 .rbc-time-content {

From 0ef3cdf9eb48b79fb3cea9df78ff6421b898300c Mon Sep 17 00:00:00 2001
From: Aamir Jawaid <aamirj@microsoft.com>
Date: Tue, 22 Jan 2019 08:53:39 -0600
Subject: [PATCH 4/6] Clean up based on PR comments.

---
 src/ResourceHeader.js | 2 +-
 src/TimeGridHeader.js | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/ResourceHeader.js b/src/ResourceHeader.js
index 2b51ee669..17a1974c3 100644
--- a/src/ResourceHeader.js
+++ b/src/ResourceHeader.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 const ResourceHeader = ({ label }) => {
-  return <span>{label}</span>
+  return <>{label}</>
 }
 
 ResourceHeader.propTypes = {
diff --git a/src/TimeGridHeader.js b/src/TimeGridHeader.js
index 95fba0876..0d68e3a7b 100644
--- a/src/TimeGridHeader.js
+++ b/src/TimeGridHeader.js
@@ -146,10 +146,9 @@ class TimeGridHeader extends React.Component {
         {resources.map(([id, resource], idx) => (
           <div className="rbc-time-header-content" key={id || idx}>
             {resource && (
-              <div className="rbc-row rbc-row-resource">
-                <div key={`resource_${idx}`} className="rbc-header">
+              <div className="rbc-row rbc-row-resource" key={`resource_${idx}`}>
+                <div className="rbc-header">
                   <ResourceHeaderComponent
-                    key={idx}
                     index={idx}
                     label={accessors.resourceTitle(resource)}
                     resource={resource}

From cef7b105fb70fedd73d03184be22234615d87cb3 Mon Sep 17 00:00:00 2001
From: Aamir Jawaid <aamirj@microsoft.com>
Date: Tue, 22 Jan 2019 09:26:48 -0600
Subject: [PATCH 5/6] Put span back

---
 src/ResourceHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ResourceHeader.js b/src/ResourceHeader.js
index 17a1974c3..2b51ee669 100644
--- a/src/ResourceHeader.js
+++ b/src/ResourceHeader.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 const ResourceHeader = ({ label }) => {
-  return <>{label}</>
+  return <span>{label}</span>
 }
 
 ResourceHeader.propTypes = {

From b64af48fb5247dcd37d5d5c0ed759be0a17a24cb Mon Sep 17 00:00:00 2001
From: Aamir Jawaid <aamirj@microsoft.com>
Date: Wed, 23 Jan 2019 12:22:07 -0600
Subject: [PATCH 6/6] Use React.Fragment.

---
 src/ResourceHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ResourceHeader.js b/src/ResourceHeader.js
index 2b51ee669..c3a126c8a 100644
--- a/src/ResourceHeader.js
+++ b/src/ResourceHeader.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 const ResourceHeader = ({ label }) => {
-  return <span>{label}</span>
+  return <React.Fragment>{label}</React.Fragment>
 }
 
 ResourceHeader.propTypes = {