Added block calendar day for BOD-94

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.js

@@ -9,6 +9,8 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import { Progress } from "antd";
 import { MdCallReceived, MdCallMissedOutgoing } from "react-icons/md";
 import Icon from "@ant-design/icons";
+import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
+
 const ShopTargetHrs = 100;
 
 const mapStateToProps = createStructuredSelector({
@@ -23,6 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ScheduleCalendarHeaderComponent({
   label,
+  refetch,
   date,
   load,
   calculating,
@@ -37,7 +40,7 @@ export function ScheduleCalendarHeaderComponent({
         percent={((loadData.expectedLoad || 0) / ShopTargetHrs) * 100}
       />
 
-      <div>
+      <div className="imex-flex-row imex-flex-row__flex-space-around">
         <Icon component={MdCallReceived} />
         {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
         <Icon component={MdCallMissedOutgoing} />
@@ -47,14 +50,16 @@ export function ScheduleCalendarHeaderComponent({
   ) : null;
 
   return (
-    <div>
-      {label}
-      {calculating || JSON.stringify(load) === "{}" ? (
-        <LoadingSkeleton />
-      ) : (
-        LoadComponent
-      )}
-    </div>
+    <ScheduleBlockDay date={date} refetch={refetch}>
+      <div>
+        {label}
+        {calculating || JSON.stringify(load) === "{}" ? (
+          <LoadingSkeleton />
+        ) : (
+          LoadComponent
+        )}
+      </div>
+    </ScheduleBlockDay>
   );
 }
 export default connect(

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

@@ -6,5 +6,9 @@
 }
 
 .imex-event-arrived {
-  background-color: green;
+  background-color: rgba(4, 141, 4, 0.4);
+}
+
+.imex-event-block {
+  background-color: rgba(212, 2, 2, 0.6);
 }

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

@@ -37,14 +37,20 @@ export function ScheduleCalendarWrapperComponent({
     //     bucket.gte <= jobHrs && (!!bucket.lt ? bucket.lt > jobHrs : true)
     // )[0];
 
-    return { className: event.arrived ? "imex-event-arrived" : "" };
+    return {
+      className: `${event.arrived ? "imex-event-arrived" : ""} ${
+        event.block ? "imex-event-block" : ""
+      }`,
+    };
   };
 
+  const selectedDate = new Date(date || moment(search.date) || Date.now());
+
   return (
     <Calendar
       events={data}
       defaultView={search.view || defaultView || "week"}
-      date={new Date(date || search.date || Date.now())}
+      date={selectedDate}
       onNavigate={(date, view, action) => {
         search.date = date.toISOString().substr(0, 10);
         history.push({ search: queryString.stringify(search) });