Load calendar on first render (#9916)

Ensure that calendar views submit an API request on first load

src/frontend/src/components/calendar/Calendar.tsx

@@ -25,7 +25,7 @@ import {
   IconDownload,
   IconFilter
 } from '@tabler/icons-react';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import type { CalendarState } from '../../hooks/UseCalendar';
 import { useLocalState } from '../../states/LocalState';
@@ -67,6 +67,11 @@ export default function Calendar({
     [state.selectMonth]
   );
 
+  useEffect(() => {
+    // Select initial month on first calendar render
+    state.ref?.current?.getApi()?.gotoDate(new Date());
+  }, []);
+
   // Callback when the calendar date range is adjusted
   const datesSet = useCallback(
     (dateInfo: DatesSetArg) => {

src/frontend/src/hooks/UseCalendar.tsx

@@ -102,7 +102,7 @@ export default function useCalendar({
 
   const query = useQuery({
     enabled: !!startDate && !!endDate,
-    queryKey: ['calendar', name, endpoint, queryFilters],
+    queryKey: ['calendar', name, endpoint, queryFilters, startDate, endDate],
     throwOnError: (error: any) => {
       showApiErrorMessage({
         error: error,