commit chnages on calendar control

Author: joaojmendes

package-lock.json

@@ -36,6 +36,7 @@
     "@fluentui/styles": "0.66.5",
     "@fluentui/theme": "^2.6.6",
     "@iconify/react": "^4.1.1",
+    "@juggle/resize-observer": "^3.4.0",
     "@microsoft/decorators": "1.20.0",
     "@microsoft/mgt-react": "3.1.3",
     "@microsoft/mgt-spfx": "3.1.3",
@@ -54,6 +55,7 @@
     "@microsoft/sp-property-pane": "1.20.0",
     "@microsoft/sp-webpart-base": "1.20.0",
     "@monaco-editor/loader": "^1.3.1",
+    "@nuvemerudita/react-controls": "^1.0.0",
     "@pnp/common": "2.5.0",
     "@pnp/odata": "2.5.0",
     "@pnp/sp": "2.5.0",

package.json

@@ -0,0 +1 @@
+export * from "./controls/calendar";

src/Calendar.ts

@@ -0,0 +1,248 @@
+import * as React from 'react';
+
+import {
+  Body1,
+  FluentProvider,
+  IdPrefixProvider,
+  webLightTheme,
+} from '@fluentui/react-components';
+import { addDays, startOfMonth, startOfWeek } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
+
+import { Day } from './Day';
+import DayView from './DayView';
+import { ECalendarViews } from './models/ECalendarViews';
+import { ICalendarControlProps } from './models/ICalendarControlProps';
+import { ICalendarDay } from './models/ICalendarDay';
+import { IEvent } from './models/IEvents';
+import { Stack } from '@nuvemerudita/react-controls';
+import Toolbar from './Toolbar';
+import WeekView from './WeekView';
+import strings from 'ControlStrings';
+import { useCalendar } from './hooks/useCalendar';
+import { useCalendarStyles } from './hooks/useCalendarStyles';
+
+interface CalendarState {
+  currentDate: Date;
+}
+
+const daysOfWeek: string[] = [
+  strings.CalendarControlDayOfWeekSunday,
+  strings.CalendarControlDayOfWeekMonday,
+  strings.CalendarControlDayOfWeekTuesday,
+  strings.CalendarControlDayOfWeekWednesday,
+  strings.CalendarControlDayOfWeekThursday,
+  strings.CalendarControlDayOfWeekFriday,
+  strings.CalendarControlDayOfWeekSaturday,
+];
+
+export const Calendar: React.FC<ICalendarControlProps> = (
+  props: ICalendarControlProps
+) => {
+  const { styles } = useCalendarStyles(props as never);
+  const calendarRef = useRef<HTMLDivElement>(null);
+  const [rowHeight, setRowHeight] = useState<number | null>(null);
+  const {
+    events,
+    height = 800,
+    theme,
+    onDayChange,
+    onMonthChange,
+    onWeekChange,
+    onViewChange,
+  } = props;
+  const rowHeightRef = useRef<number>(0);
+
+  // Default current date
+  const [currentDate, setCurrentDate] = useState<CalendarState['currentDate']>(
+    new Date()
+  );
+  // Default view
+  const [selectedView, setSelectedView] = useState<ECalendarViews>(
+    ECalendarViews.Month
+  );
+  // Get month calendar
+  const { getMonthCalendar } = useCalendar(
+    events,
+    Intl.DateTimeFormat().resolvedOptions().timeZone
+  );
+  // Get calendar days
+  const getCalendarDays = React.useCallback((date: Date): ICalendarDay[] => {
+    const month = date.getMonth();
+    const firstDayOfMonth = startOfMonth(date);
+    const firstDayOfWeek = startOfWeek(firstDayOfMonth);
+    const totalDisplayedDays = 42;
+    // Generate calendar days
+    const calendarDays = Array.from(
+      { length: totalDisplayedDays },
+      (_, index): ICalendarDay => {
+        const relativeDay = addDays(firstDayOfWeek, index);
+        return {
+          day: relativeDay.getDate(),
+          currentMonth: relativeDay.getMonth() === month,
+          date: relativeDay,
+        };
+      }
+    );
+    return calendarDays;
+  }, []);
+
+  // Handle month change
+  const handleMonthChange = React.useCallback(
+    (date: Date): void => {
+      if (onMonthChange) {
+        onMonthChange(date);
+      }
+      setCurrentDate(date);
+    },
+    [currentDate]
+  );
+  // Handle day change
+  const handleDayChange = React.useCallback(
+    (date: Date): void => {
+      if (onDayChange) {
+        onDayChange(date);
+      }
+      setCurrentDate(date);
+    },
+    [currentDate]
+  );
+  // Handle week change
+  const handleWeekChange = React.useCallback(
+    (date: Date): void => {
+      if (onWeekChange) {
+        onWeekChange(date);
+      }
+      setCurrentDate(date);
+    },
+    [currentDate]
+  );
+  // Handle view change
+  const handleViewChange = React.useCallback(
+    (view: ECalendarViews): void => {
+      if (onViewChange) {
+        onViewChange(view);
+      }
+      setSelectedView(view);
+    },
+    [selectedView]
+  );
+  // Get events for the day
+  const getEventsForDay = React.useCallback(
+    (dateObj: ICalendarDay): IEvent[] => {
+      const { date } = dateObj;
+      const monthEvents = getMonthCalendar(
+        currentDate.getFullYear(),
+        currentDate.getMonth()
+      );
+      const dayString = date.toISOString().split('T')[0]; // Get date in YYYY-MM-DD format
+      return monthEvents[dayString]?.flatMap((slot) => slot) || [];
+    },
+    [currentDate]
+  );
+  // Resize observer
+  useEffect(() => {
+    if (calendarRef.current) {
+      const firstDataColumnCell = calendarRef.current.querySelector(
+        `.${styles.calendarWrapper} > div:nth-child(8)`
+      ) as HTMLDivElement;
+
+      if (firstDataColumnCell) {
+        setRowHeight(firstDataColumnCell.offsetHeight);
+        rowHeightRef.current = firstDataColumnCell.offsetHeight;
+      }
+    }
+  }, [calendarRef.current]);
+  // Toolbar component
+
+  // Render Month View
+  const RenderMonthView = React.useCallback(() => {
+    return (
+      <Stack
+        height={height}
+        width={'100%'}
+        verticalAlign="start"
+        horizontalAlign="center"
+      >
+        <div className={styles.calendarWrapper} ref={calendarRef}>
+          {daysOfWeek.map((day) => (
+            <Body1 key={day} className={styles.dayHeader}>
+              {day}
+            </Body1>
+          ))}
+          {getCalendarDays(currentDate).map((dateObj, index) => {
+            const { day, currentMonth } = dateObj;
+            const events = currentMonth ? getEventsForDay(dateObj) : [];
+            return (
+              <Day
+                key={index}
+                day={day}
+                date={dateObj.date}
+                currentMonth={dateObj.currentMonth}
+                events={events}
+                columnHeight={rowHeight || 0}
+              />
+            );
+          })}
+        </div>
+      </Stack>
+    );
+  }, [currentDate, getCalendarDays, getEventsForDay, rowHeight, styles]);
+  // Render Week View
+  const RenderWeekView = React.memo(() => {
+    return (
+      <>
+        {selectedView === ECalendarViews.Week && (
+          <WeekView events={events} currentDay={currentDate} height={height} />
+        )}
+      </>
+    );
+  });
+  // Render Day View
+  const RenderDayView = React.memo(() => {
+    return (
+      <>
+        {selectedView === ECalendarViews.Day && (
+          <DayView currentDay={currentDate} events={events} height={height} />
+        )}
+      </>
+    );
+  });
+
+  // Render content
+  const RenderContent = React.useCallback(() => {
+    switch (selectedView) {
+      case ECalendarViews.Month:
+        return <RenderMonthView />;
+      case ECalendarViews.Week:
+        return <RenderWeekView />;
+      case ECalendarViews.Day:
+        return <RenderDayView />;
+      default:
+        return <RenderMonthView />;
+    }
+  }, [selectedView, RenderMonthView, RenderWeekView, RenderDayView]);
+
+  return (
+    <>
+      <IdPrefixProvider value="calendarControl-">
+        <FluentProvider theme={theme ?? webLightTheme}>
+          <Stack height={'100%'} verticalAlign="start">
+            <Toolbar
+              selectedView={selectedView}
+              onSelectedView={handleViewChange}
+              currentDate={currentDate}
+              setCurrentDate={setCurrentDate}
+              onWeekChange={handleWeekChange}
+              onMonthChange={handleMonthChange}
+              onDayChange={handleDayChange}
+            />
+            <RenderContent />
+          </Stack>
+        </FluentProvider>
+      </IdPrefixProvider>
+    </>
+  );
+};
+
+export default Calendar;

src/controls/calendar/Calendar.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+
+import { Body2, mergeClasses } from "@fluentui/react-components";
+import { Card, Stack } from "@nuvemerudita/react-controls";
+
+import { IEvent } from "./models/IEvents";
+import { RenderEventToDayOfMonth } from "./RenderEventToDayOfMonth";
+import { isSameDay } from "date-fns";
+import { useCalendarStyles } from "./hooks/useCalendarStyles";
+
+export interface IDayProps {
+  day: number;
+  date: Date;
+  currentMonth: boolean;
+  events: IEvent[];
+  columnHeight: number;
+}
+
+export const Day: React.FunctionComponent<IDayProps> = (
+  props: React.PropsWithChildren<IDayProps>
+) => {
+  const { day, currentMonth, events, date, columnHeight } = props;
+  const { styles } = useCalendarStyles(props);
+  const currentDate = new Date();
+  const [isEventHovered, setIsEventHovered] = React.useState(false);
+
+  const isCurrentDayAndMonth = React.useMemo(() => {
+    return isSameDay(date, currentDate);
+  }, [date, currentDate]);
+
+  const renderCurrentDayLabel = React.useMemo(() => {
+    return (
+      <Stack
+        horizontal
+        horizontalAlign="start"
+        verticalAlign="center"
+        RowGap={10}
+      >
+        <Body2 className={styles.currentDayLabel}>
+          {day} {currentDate.toLocaleString("default", { month: "short" })}
+        </Body2>
+      </Stack>
+    );
+  }, [day]);
+
+  const handleCardHoverChange = React.useCallback(
+    (isHovered: boolean): void => {
+      setIsEventHovered(isHovered);
+    },
+    []
+  );
+
+  return (
+    <>
+      <Card
+        className={mergeClasses(
+          styles.cardDay,
+          currentMonth ? "" : styles.otherMonthDay,
+          isCurrentDayAndMonth ? styles.currentDay : "",
+          !isEventHovered ? styles.cardDayOnHover : ""
+        )}
+        cardHeader={
+          isCurrentDayAndMonth ? renderCurrentDayLabel : <Body2>{day}</Body2>
+        }
+        padding="xsmall"
+        cardBody={
+          <RenderEventToDayOfMonth
+            events={events}
+            date={date}
+            onCardHoverChange={handleCardHoverChange}
+            columnHeight={columnHeight - 60}
+          />
+        }
+      />
+    </>
+  );
+};