BOD-84 Added base calculations for schedule load

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

@@ -1,9 +1,9 @@
+import { Progress } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React from "react";
 import { Calendar, momentLocalizer } from "react-big-calendar";
 import { useHistory, useLocation } from "react-router-dom";
-import DateCellWrapper from "../schedule-datecellwrapper/schedule-datecellwrapper.component";
 import Event from "../schedule-event/schedule-event.container";
 //import "react-big-calendar/lib/css/react-big-calendar.css";
 import "./schedule-calendar.styles.scss";
@@ -14,6 +14,7 @@ export default function ScheduleCalendarWrapperComponent({
   data,
   refetch,
   defaultView,
+  setDateRangeCallback,
   ...otherProps
 }) {
   const search = queryString.parse(useLocation().search);
@@ -22,12 +23,19 @@ export default function ScheduleCalendarWrapperComponent({
   return (
     <Calendar
       events={data}
-      defaultView={defaultView}
+      defaultView={search.view || defaultView || "week"}
       date={new Date(search.date || Date.now())}
       onNavigate={(date, view, action) => {
         search.date = date.toISOString().substr(0, 10);
         history.push({ search: queryString.stringify(search) });
       }}
+      onRangeChange={(start, end) => {
+        if (setDateRangeCallback) setDateRangeCallback({ start, end });
+      }}
+      onView={(view) => {
+        search.view = view;
+        history.push({ search: queryString.stringify(search) });
+      }}
       step={30}
       showMultiDayTimes
       localizer={localizer}
@@ -35,7 +43,15 @@ export default function ScheduleCalendarWrapperComponent({
       max={new Date("2020-01-01T20:00:00")}
       components={{
         event: (e) => Event({ event: e.event, refetch: refetch }),
-        dateCellWrapper: DateCellWrapper,
+        header: (props) => {
+          return (
+            <span>
+              <div>{props.label}</div>
+              <Progress style={{ flex: "1" }} percent={77} showInfo={false} />
+            </span>
+          );
+        },
+        //dateCellWrapper: DateCellWrapper,
       }}
       {...otherProps}
     />