feat: move headerToolbar functionality to Menubar component

- Remove headerToolbar from FullCalendar and set to false
- Create CalendarLayout component to manage state between Menubar and Calendar
- Add navigation controls (prev/today/next) to Menubar left-menu using MUI ButtonGroup
- Add current date/time display (April 2024 format) to Menubar left-menu
- Add view selector (Month/Week/Day) to Menubar right-menu using MUI Select
- Implement real-time date synchronization between Calendar and Menubar

src/components/Calendar/CalendarLayout.tsx

@@ -0,0 +1,64 @@
+import React, { useRef, useState } from "react";
+import { Menubar, MenubarProps } from "../Menubar/Menubar";
+import CalendarApp from "./Calendar";
+import { useAppDispatch } from "../../app/hooks";
+import {
+  getCalendarDetailAsync,
+  getCalendarsListAsync,
+} from "../../features/Calendars/CalendarSlice";
+import {
+  formatDateToYYYYMMDDTHHMMSS,
+  getCalendarRange,
+} from "../../utils/dateUtils";
+import { useAppSelector } from "../../app/hooks";
+
+export default function CalendarLayout() {
+  const calendarRef = useRef<any>(null);
+  const dispatch = useAppDispatch();
+  const selectedCalendars = useAppSelector((state) => state.calendars.list);
+  const userId = useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
+  const [currentDate, setCurrentDate] = useState<Date>(new Date());
+
+  const handleRefresh = async () => {
+    await dispatch(getCalendarsListAsync());
+    
+    // Get current calendar range
+    if (calendarRef.current) {
+      const view = calendarRef.current.getApi().view;
+      const calendarRange = getCalendarRange(view.activeStart);
+      
+      // Refresh events for selected calendars
+      Object.keys(selectedCalendars).forEach((id) => {
+        if (id.split("/")[0] === userId) {
+          dispatch(
+            getCalendarDetailAsync({
+              calId: id,
+              match: {
+                start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
+                end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
+              },
+            })
+          );
+        }
+      });
+    }
+  };
+
+  const handleDateChange = (date: Date) => {
+    setCurrentDate(date);
+  };
+
+  const menubarProps: MenubarProps = {
+    calendarRef,
+    onRefresh: handleRefresh,
+    currentDate,
+    onDateChange: handleDateChange,
+  };
+
+  return (
+    <div className="App">
+      <Menubar {...menubarProps} />
+      <CalendarApp calendarRef={calendarRef} onDateChange={handleDateChange} />
+    </div>
+  );
+}