IO-1954 schedule display improvements.

client/src/components/job-at-change/schedule-event.component.jsx

@@ -247,40 +247,39 @@ export function ScheduleEventComponent({
   );
 
   const RegularEvent = event.isintake ? (
-    <div
+    <Space
+      wrap
       style={{
-        display: "flex",
-        flexWrap: "wrap",
-        height: "100%",
+        backgroundColor:
+          event.color && event.color.hex ? event.color.hex : event.color,
       }}
     >
-      <Space>
-        {event.note && <AlertFilled className="production-alert" />}
-        <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
-        <span>
-          <OwnerNameDisplay ownerObject={event.job} />
-        </span>
-      </Space>
-      <Space>
-        <span>
-          {`${(event.job && event.job.v_model_yr) || ""} ${
-            (event.job && event.job.v_make_desc) || ""
-          } ${(event.job && event.job.v_model_desc) || ""}`}
-        </span>
-        <span>
-          {`(${
-            (event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"
-          } / ${
-            (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
-          })`}
-        </span>
-      </Space>
+      {event.note && <AlertFilled className="production-alert" />}
+      <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
+
+      <OwnerNameDisplay ownerObject={event.job} />
+
+      {`${(event.job && event.job.v_model_yr) || ""} ${
+        (event.job && event.job.v_make_desc) || ""
+      } ${(event.job && event.job.v_model_desc) || ""}`}
+
+      {`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
+        (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
+      })`}
+
       {event.job && event.job.alt_transport && (
         <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>
       )}
-    </div>
+    </Space>
   ) : (
-    <div style={{ height: "100%", width: "100%" }}>
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        backgroundColor:
+          event.color && event.color.hex ? event.color.hex : event.color,
+      }}
+    >
       <strong>{`${event.title || ""}`}</strong>
     </div>
   );
@@ -291,7 +290,13 @@ export function ScheduleEventComponent({
       onVisibleChange={(vis) => !event.vacation && setVisible(vis)}
       trigger="click"
       content={event.block ? blockContent : popoverContent}
-      style={{ height: "100%", width: "100%" }}
+      style={{
+        height: "100%",
+        width: "100%",
+
+        backgroundColor:
+          event.color && event.color.hex ? event.color.hex : event.color,
+      }}
     >
       {RegularEvent}
     </Popover>

client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss

@@ -4,6 +4,10 @@
 .rbc-time-view .rbc-allday-cell {
   height: unset;
 }
+
+.rbc-month-row{
+  overflow: unset !important;
+}
 // .rbc-row-content {
 //   display: none;
 // }

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -34,7 +34,7 @@ export function ScheduleCalendarWrapperComponent({
   const { t } = useTranslation();
   const handleEventPropStyles = (event, start, end, isSelected) => {
     return {
-      ...(event.color
+      ...(event.color && !((search.view || defaultView) === "agenda")
         ? {
             style: {
               backgroundColor: