Fixed a hooks bug that would cause events not to show

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactjs-google-calendar",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A functional calendar renderer for events from a google calendar",
   "main": "./lib/index.js",
   "module": "build/index.es.js",

src/Frame.tsx

@@ -36,7 +36,7 @@ export interface CalendarFrameProps {
 export function CalendarFrame(props: CalendarFrameProps) {
 
   const days = props.dayLabels || defaultDayLabels;
-  const startIndex = new Date(props.start).getDay();
+  const startIndex = useMemo(() => (new Date(props.start).getDay() + 6) % 7, [props.start]);
   const maxEvents = props.maxEvents || 5;
 
   const styles = useMemo(() => {
@@ -51,11 +51,11 @@ export function CalendarFrame(props: CalendarFrameProps) {
     let w = [] as Date[];
     for (let i = 0; i < (props.weeks || defaultWeeks); i++) {
       let curr = new Date(props.start);
-      curr.setDate(curr.getDate() + days.length * i);
+      curr.setDate(curr.getDate() - startIndex + days.length * i);
       w.push(curr);
     }
     return w;
-  }, [props.start, props.weeks]);
+  }, [props.start, props.weeks, startIndex]);
   const colorStatuses = props.colorStatuses || {};
 
   return (
@@ -73,7 +73,7 @@ export function CalendarFrame(props: CalendarFrameProps) {
         {weeks.map((week, i) => {
           let days = [];
           for (let i = 0; i < 7; i++) {
-            let date = new Date(new Date(week).setDate(week.getDate() + i - startIndex));
+            let date = new Date(new Date(week).setDate(week.getDate() + i));
             let timestamp = getEventDate(date);
             let today = getEventDate(Date.now()) === timestamp;
             let day = (

src/hooks/useEvents.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import { CalendarSettingsContext } from '../contexts';
 import { CalendarEvent } from '../Event';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useReducer, useState } from 'react';
 import { getEventDate } from '../utils';
 import { GoogleCalendar } from '../interfaces';
 
@@ -22,13 +22,25 @@ interface EventHookProps {
 
 export default function useEvents(props: EventHookProps) {
 
-  const [events, setEvents] = useState(props.events || {});
-  const [colors, setColors] = useState({} as {[color: string]: string}); /* calendarName */
+  const [events, setEvents] = useReducer((state: typeof props.events, action: typeof props.events) => {
+	  return Object.assign({}, state, action);
+  }, props.events || {});
+
+  const [colors, updateColors] = useReducer((state: {[color: string]: string}, action: {[key: string]: CalendarEvent[]}) => {
+	let c = Object.assign({}, state);
+    for (let eventArr of Object.values(action)) {
+      for (let e of eventArr) {
+        if (!c[e.color]) c[e.color] = e.calendarName;
+      }
+    }
+    props.setColorStatuses(Object.keys(c));
+    return c;
+  }, {}); /* calendarName */
 
   const settings = useContext(CalendarSettingsContext);
 
   const handleId = useCallback(async (calendarId: string) => {
-    let eventDict = events;
+    let eventDict = Object.assign({}, events);
 
     let res = await axios({
       baseURL: settings.baseURL || baseURL,
@@ -63,32 +75,17 @@ export default function useEvents(props: EventHookProps) {
     setEvents(eventDict);
   }, [events, colors, settings, setEvents, props]);
 
-  const parseColorsFromEvents = useCallback((eventDict: {[key: string]: CalendarEvent[]}) => {
-    let c = colors;
-    for (let eventArr of Object.values(eventDict)) {
-      for (let e of eventArr) {
-        if (!c[e.color]) c[e.color] = e.calendarName;
-      }
-    }
-    setColors(c);
-    props.setColorStatuses(Object.keys(c));
-  }, [setColors, props.setColorStatuses]);
-
   useEffect(() => {
     Object.entries(props.calendars).forEach(([k, v]) => {
       if (k === v) return;
       handleId(k);
     });
   }, [props.calendars]);
 
-  useEffect(() => {
-    if (props.events) setEvents(props.events);
-  }, [setEvents, props.events]);
-
   useEffect(() => {
     if (!Object.keys(events).length) return;
-    parseColorsFromEvents(events);
-  }, [events, parseColorsFromEvents]);
+    updateColors(events);
+  }, [events, updateColors]);
 
   return { colors, events };