adjusting calendar dates to dynamically value change

Author: yoavweber

src/components/WeeklyCalendar.tsx

@@ -1,23 +1,23 @@
-import React, { useState, useEffect } from "react";
-import { Card } from "antd";
+import React, { useState, useEffect } from 'react';
+import { Card } from 'antd';
 import {
   getDay,
   eachDayOfInterval,
   startOfWeek,
   endOfWeek,
   isSameDay,
   isSameWeek,
-} from "date-fns";
+} from 'date-fns';
 
-import Calendar from "./CalendarBody";
-import { CalendarHeader } from "./CalendarHeader";
+import Calendar from './CalendarBody';
+import { CalendarHeader } from './CalendarHeader';
 
 import {
   GenericEvent,
   CalendarContainerProps,
   WeekObject,
   DayName,
-} from "./types";
+} from './types';
 
 export function WeeklyCalendar<T extends GenericEvent>({
   events,
@@ -32,19 +32,25 @@ export function WeeklyCalendar<T extends GenericEvent>({
     endDate: endOfWeek(startWeek),
   };
 
+  useEffect(() => {
+    if (value && startOfWeek(value).getTime() !== startWeek.getTime()) {
+      setStartWeek(value);
+    }
+  }, [value]);
+
   useEffect(() => {
     onSelectDate && onSelectDate(startWeek);
   }, [startWeek]);
 
   const daysToWeekObject = <T extends GenericEvent>(events: T[]) => {
     const dayNames: DayName[] = [
-      "sunday",
-      "monday",
-      "tuesday",
-      "wednesday",
-      "thursday",
-      "friday",
-      "saturday",
+      'sunday',
+      'monday',
+      'tuesday',
+      'wednesday',
+      'thursday',
+      'friday',
+      'saturday',
     ];
 
     const weekObject: WeekObject<T> = {