BOD-84 Added base calculations for schedule load

client/src/components/schedule-calendar-wrapper/schedule-calendar-util.js

@@ -0,0 +1,29 @@
+import moment from "moment";
+
+export function getRange(dateParam, viewParam) {
+  let start, end;
+  let date = dateParam || new Date();
+  let view = viewParam || "week";
+  // if view is day: from moment(date).startOf('day') to moment(date).endOf('day');
+  if (view === "day") {
+    start = moment(date).startOf("day");
+    end = moment(date).endOf("day");
+  }
+  // if view is week: from moment(date).startOf('isoWeek') to moment(date).endOf('isoWeek');
+  else if (view === "week") {
+    start = moment(date).startOf("week");
+    end = moment(date).endOf("week");
+  }
+  //if view is month: from moment(date).startOf('month').subtract(7, 'days') to moment(date).endOf('month').add(7, 'days'); i do additional 7 days math because you can see adjacent weeks on month view (that is the way how i generate my recurrent events for the Big Calendar, but if you need only start-end of month - just remove that math);
+  else if (view === "month") {
+    start = moment(date).startOf("month").subtract(7, "days");
+    end = moment(date).endOf("month").add(7, "days");
+  }
+  // if view is agenda: from moment(date).startOf('day') to moment(date).endOf('day').add(1, 'month');
+  else if (view === "agenda") {
+    start = moment(date).startOf("day");
+    end = moment(date).endOf("day").add(1, "month");
+  }
+
+  return { start, end };
+}

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}
     />