From 5326459e579844f6679afb17e260ac1fafad37ec Mon Sep 17 00:00:00 2001
From: "swapnil.kulkarni" <swapnil.kulkarni@cloudkitchens.com>
Date: Mon, 26 Jul 2021 16:42:34 -0700
Subject: [PATCH] Make popover flexible

---
 src/EventItemPopover.js | 40 ++++++++++++++++++++++++++++++++++------
 src/config.js           |  1 +
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/EventItemPopover.js b/src/EventItemPopover.js
index cb36c7984..5e0f25d44 100644
--- a/src/EventItemPopover.js
+++ b/src/EventItemPopover.js
@@ -88,13 +88,43 @@ class EventItemPopover extends Component {
                 );
             }
 
+            let colorRow = config.eventItemPopoverShowColor ? (
+              <Col span={2}>
+                <div
+                  className="status-dot"
+                  style={{ backgroundColor: statusColor }}
+                />
+              </Col>
+            ) : null;
+
             let dateFormat = config.eventItemPopoverDateFormat;
+
+            let dateTimeRow = (
+              <Col span={22}>
+                <span className="header1-text">{start.format("HH:mm")}</span>
+                {dateFormat && (
+                  <span className="help-text" style={{ marginLeft: "8px" }}>
+                    {start.format(dateFormat)}
+                  </span>
+                )}
+                <span className="header2-text" style={{ marginLeft: "8px" }}>
+                  -
+                </span>
+                <span className="header1-text" style={{ marginLeft: "8px" }}>
+                  {end.format("HH:mm")}
+                </span>
+                {dateFormat && (
+                  <span className="help-text" style={{ marginLeft: "8px" }}>
+                    {end.format(dateFormat)}
+                  </span>
+                )}
+              </Col>
+            );
+
             return (
                 <div style={{width: '300px'}}>
                     <Row type="flex" align="middle">
-                        <Col span={2}>
-                            <div className="status-dot" style={{backgroundColor: statusColor}} />
-                        </Col>
+                        {colorRow}
                         <Col span={22} className="overflow-text">
                             <span className="header2-text" title={title}>{title}</span>
                         </Col>
@@ -104,9 +134,7 @@ class EventItemPopover extends Component {
                         <Col span={2}>
                             <div />
                         </Col>
-                        <Col span={22}>
-                            <span className="header1-text">{start.format('HH:mm')}</span><span className="help-text" style={{marginLeft: '8px'}}>{start.format(dateFormat)}</span><span className="header2-text"  style={{marginLeft: '8px'}}>-</span><span className="header1-text" style={{marginLeft: '8px'}}>{end.format('HH:mm')}</span><span className="help-text" style={{marginLeft: '8px'}}>{end.format(dateFormat)}</span>
-                        </Col>
+                        {dateTimeRow}
                     </Row>
                     {opsRow}
                 </div>
diff --git a/src/config.js b/src/config.js
index b15bd31b4..5f1fd9c34 100644
--- a/src/config.js
+++ b/src/config.js
@@ -53,6 +53,7 @@ export default {
     checkConflict: false,
     scrollToSpecialMomentEnabled: true,
     eventItemPopoverEnabled: true,
+    eventItemPopoverShowColor: false,
     calendarPopoverEnabled: true,
     recurringEventsEnabled: true,
     headerEnabled: true,