@isma91/react-scheduler 4.0.0

package/src/lib/views/Day.tsx

@@ -0,0 +1,265 @@
+import { useEffect, useCallback, Fragment } from "react";
+import { Typography } from "@mui/material";
+import {
+  format,
+  eachMinuteOfInterval,
+  isToday,
+  isBefore,
+  isAfter,
+  startOfDay,
+  endOfDay,
+  addDays,
+  addMinutes,
+  set,
+} from "date-fns";
+import TodayTypo from "../components/common/TodayTypo";
+import EventItem from "../components/events/EventItem";
+import { DefaultResource, ProcessedEvent } from "../types";
+import {
+  calcCellHeight,
+  calcMinuteHeight,
+  filterMultiDaySlot,
+  filterTodayEvents,
+  getHourFormat,
+  getResourcedEvents,
+} from "../helpers/generals";
+import { WithResources } from "../components/common/WithResources";
+import Cell from "../components/common/Cell";
+import TodayEvents from "../components/events/TodayEvents";
+import { TableGrid } from "../styles/styles";
+import { MULTI_DAY_EVENT_HEIGHT } from "../helpers/constants";
+import useStore from "../hooks/useStore";
+import { DayAgenda } from "./DayAgenda";
+
+const Day = () => {
+  const {
+    day,
+    selectedDate,
+    events,
+    height,
+    getRemoteEvents,
+    triggerLoading,
+    handleState,
+    resources,
+    resourceFields,
+    resourceViewMode,
+    fields,
+    direction,
+    locale,
+    hourFormat,
+    timeZone,
+    stickyNavigation,
+    agenda,
+    stickyNavigationOffset,
+    stickyNavigationHeight,
+    currentTime,
+    showCurrentTimeBar,
+    currentTimeBarColor,
+    forceInlineMultiDay,
+  } = useStore();
+
+  const { startHour, endHour, step, cellRenderer, headRenderer, hourRenderer } = day!;
+  const START_TIME = set(selectedDate, { hours: startHour, minutes: 0, seconds: 0 });
+  const END_TIME = set(selectedDate, { hours: endHour, minutes: -step, seconds: 0 });
+  const hours = eachMinuteOfInterval(
+    {
+      start: START_TIME,
+      end: END_TIME,
+    },
+    { step: step }
+  );
+  const CELL_HEIGHT = calcCellHeight(height, hours.length);
+  const MINUTE_HEIGHT = calcMinuteHeight(CELL_HEIGHT, step);
+  const hFormat = getHourFormat(hourFormat);
+
+  const fetchEvents = useCallback(async () => {
+    try {
+      triggerLoading(true);
+      const start = addDays(START_TIME, -1);
+      const end = addDays(END_TIME, 1);
+      const events = await getRemoteEvents!({
+        start,
+        end,
+        view: "day",
+      });
+      if (events && events?.length) {
+        handleState(events, "events");
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      triggerLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getRemoteEvents]);
+
+  useEffect(() => {
+    if (getRemoteEvents instanceof Function) {
+      fetchEvents();
+    }
+  }, [fetchEvents, getRemoteEvents]);
+
+  const renderMultiDayEvents = useCallback(
+    (events: ProcessedEvent[]) => {
+      const todayMulti = filterMultiDaySlot(events, selectedDate, timeZone, forceInlineMultiDay);
+      return (
+        <div
+          className="rs__block_col"
+          style={{ height: MULTI_DAY_EVENT_HEIGHT * todayMulti.length }}
+        >
+          {todayMulti.map((event, i) => {
+            const hasPrev = isBefore(event.start, startOfDay(selectedDate));
+            const hasNext = isAfter(event.end, endOfDay(selectedDate));
+            return (
+              <div
+                key={event.event_id}
+                className="rs__multi_day"
+                style={{
+                  top: i * MULTI_DAY_EVENT_HEIGHT,
+                  width: "99.9%",
+                  overflowX: "hidden",
+                }}
+              >
+                <EventItem event={event} multiday hasPrev={hasPrev} hasNext={hasNext} />
+              </div>
+            );
+          })}
+        </div>
+      );
+    },
+    [selectedDate, timeZone]
+  );
+
+  const renderTable = useCallback(
+    (resource?: DefaultResource) => {
+      let resourcedEvents = events;
+      if (resource) {
+        resourcedEvents = getResourcedEvents(events, resource, resourceFields, fields);
+      }
+
+      if (agenda) {
+        return <DayAgenda resource={resource} events={resourcedEvents} />;
+      }
+
+      // Equalizing multi-day section height
+      const shouldEqualize = resources.length && resourceViewMode === "default";
+      const allWeekMulti = filterMultiDaySlot(
+        shouldEqualize ? events : resourcedEvents,
+        selectedDate,
+        timeZone,
+        forceInlineMultiDay
+      );
+      const headerHeight = MULTI_DAY_EVENT_HEIGHT * allWeekMulti.length + 45;
+      return (
+        <>
+          {/* Header */}
+          <TableGrid
+            days={1}
+            sticky="1"
+            stickyNavigation={stickyNavigation}
+            stickyOffset={stickyNavigationOffset}
+            stickyHeight={stickyNavigationHeight}
+          >
+            <span className="rs__cell"></span>
+            <span
+              className={`rs__cell rs__header ${isToday(selectedDate) ? "rs__today_cell" : ""}`}
+              style={{ height: headerHeight }}
+            >
+              {typeof headRenderer === "function" ? (
+                <div>{headRenderer({ day: selectedDate, events: resourcedEvents, resource })}</div>
+              ) : (
+                <TodayTypo date={selectedDate} locale={locale} />
+              )}
+              {renderMultiDayEvents(resourcedEvents)}
+            </span>
+          </TableGrid>
+          <TableGrid days={1}>
+            {/* Body */}
+            {hours.map((h, i) => {
+              const start = new Date(`${format(selectedDate, "yyyy/MM/dd")} ${format(h, hFormat)}`);
+              const end = addMinutes(start, step);
+              const field = resourceFields.idField;
+              return (
+                <Fragment key={i}>
+                  {/* Time Cells */}
+                  <span className="rs__cell rs__header rs__time" style={{ height: CELL_HEIGHT }}>
+                    {typeof hourRenderer === "function" ? (
+                      <div>{hourRenderer(format(h, hFormat, { locale }))}</div>
+                    ) : (
+                      <Typography variant="caption">{format(h, hFormat, { locale })}</Typography>
+                    )}
+                  </span>
+                  <span className={`rs__cell ${isToday(selectedDate) ? "rs__today_cell" : ""}`}>
+                    {/* Events of this day - run once on the top hour column */}
+                    {i === 0 && (
+                      <TodayEvents
+                        todayEvents={filterTodayEvents(
+                          resourcedEvents,
+                          selectedDate,
+                          timeZone,
+                          forceInlineMultiDay
+                        )}
+                        today={START_TIME}
+                        minuteHeight={MINUTE_HEIGHT}
+                        startHour={startHour}
+                        endHour={endHour}
+                        step={step}
+                        direction={direction}
+                        timeZone={timeZone}
+                        currentTime={currentTime}
+                        showCurrentTimeBar={showCurrentTimeBar}
+                        currentTimeBarColor={currentTimeBarColor}
+                      />
+                    )}
+                    {/* Cell */}
+                    <Cell
+                      start={start}
+                      end={end}
+                      day={selectedDate}
+                      height={CELL_HEIGHT}
+                      resourceKey={field}
+                      resourceVal={resource ? resource[field] : null}
+                      cellRenderer={cellRenderer}
+                    />
+                  </span>
+                </Fragment>
+              );
+            })}
+          </TableGrid>
+        </>
+      );
+    },
+    [
+      CELL_HEIGHT,
+      MINUTE_HEIGHT,
+      START_TIME,
+      agenda,
+      cellRenderer,
+      direction,
+      endHour,
+      events,
+      fields,
+      hFormat,
+      headRenderer,
+      hourRenderer,
+      hours,
+      locale,
+      renderMultiDayEvents,
+      resourceFields,
+      resourceViewMode,
+      resources.length,
+      selectedDate,
+      startHour,
+      step,
+      stickyNavigation,
+      timeZone,
+      currentTime,
+      showCurrentTimeBar,
+      currentTimeBarColor,
+    ]
+  );
+
+  return resources.length ? <WithResources renderChildren={renderTable} /> : renderTable();
+};
+
+export { Day };

package/src/lib/views/DayAgenda.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from "react";
+import { format } from "date-fns";
+import { AgendaDiv } from "../styles/styles";
+import { DefaultResource, ProcessedEvent } from "../types";
+import useStore from "../hooks/useStore";
+import { Typography } from "@mui/material";
+import { filterTodayAgendaEvents } from "../helpers/generals";
+import AgendaEventsList from "../components/events/AgendaEventsList";
+import EmptyAgenda from "../components/events/EmptyAgenda";
+
+type Props = {
+  events: ProcessedEvent[];
+  resource?: DefaultResource;
+};
+const DayAgenda = ({ events, resource }: Props) => {
+  const {
+    day,
+    locale,
+    selectedDate,
+    translations,
+    alwaysShowAgendaDays,
+    stickyNavigationOffset,
+    stickyNavigationHeight,
+  } = useStore();
+  const { headRenderer } = day!;
+
+  const dayEvents = useMemo(() => {
+    return filterTodayAgendaEvents(events, selectedDate);
+  }, [events, selectedDate]);
+
+  if (!alwaysShowAgendaDays && !dayEvents.length) {
+    return <EmptyAgenda />;
+  }
+
+  return (
+    <AgendaDiv stickyOffset={stickyNavigationOffset} stickyHeight={stickyNavigationHeight}>
+      <div className="rs__agenda_row rs__today_cell">
+        <div className="rs__cell rs__agenda__cell">
+          {typeof headRenderer === "function" ? (
+            <div>{headRenderer({ day: selectedDate, events, resource })}</div>
+          ) : (
+            <Typography variant="body2">{format(selectedDate, "dd E", { locale })}</Typography>
+          )}
+        </div>
+        <div className="rs__cell rs__agenda_items">
+          {dayEvents.length > 0 ? (
+            <AgendaEventsList day={selectedDate} events={dayEvents} />
+          ) : (
+            <Typography sx={{ padding: 1 }}>{translations.noDataToDisplay}</Typography>
+          )}
+        </div>
+      </div>
+    </AgendaDiv>
+  );
+};
+
+export { DayAgenda };

package/src/lib/views/Editor.tsx

@@ -0,0 +1,258 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { addMinutes, differenceInMinutes } from "date-fns";
+import { Fragment, useState } from "react";
+import { EditorDatePicker } from "../components/inputs/DatePicker";
+import { EditorInput } from "../components/inputs/Input";
+import { EditorSelect } from "../components/inputs/SelectInput";
+import { arraytizeFieldVal, revertTimeZonedDate } from "../helpers/generals";
+import useStore from "../hooks/useStore";
+import { SelectedRange } from "../store/types";
+import {
+  EventActions,
+  FieldInputProps,
+  FieldProps,
+  InputTypes,
+  ProcessedEvent,
+  SchedulerHelpers,
+} from "../types";
+
+export type StateItem = {
+  value: any;
+  validity: boolean;
+  type: InputTypes;
+  config?: FieldInputProps;
+};
+
+export type StateEvent = (ProcessedEvent & SelectedRange) | Record<string, any>;
+
+const initialState = (fields: FieldProps[], event?: StateEvent): Record<string, StateItem> => {
+  const customFields = {} as Record<string, StateItem>;
+  for (const field of fields) {
+    const defVal = arraytizeFieldVal(field, field.default, event);
+    const eveVal = arraytizeFieldVal(field, event?.[field.name], event);
+
+    customFields[field.name] = {
+      value: eveVal.value || defVal.value || "",
+      validity: field.config?.required ? !!eveVal.validity || !!defVal.validity : true,
+      type: field.type,
+      config: field.config,
+    };
+  }
+
+  return {
+    event_id: {
+      value: event?.event_id || null,
+      validity: true,
+      type: "hidden",
+    },
+    title: {
+      value: event?.title || "",
+      validity: !!event?.title,
+      type: "input",
+      config: { label: "Title", required: true, min: 3 },
+    },
+    subtitle: {
+      value: event?.subtitle || "",
+      validity: true,
+      type: "input",
+      config: { label: "Subtitle", required: false },
+    },
+    start: {
+      value: event?._originalStart || event?.start || new Date(),
+      validity: true,
+      type: "date",
+      config: { label: "Start", sm: 6 },
+    },
+    end: {
+      value: event?._originalEnd || event?.end || new Date(),
+      validity: true,
+      type: "date",
+      config: { label: "End", sm: 6 },
+    },
+    ...customFields,
+  };
+};
+
+const Editor = () => {
+  const {
+    fields,
+    dialog,
+    triggerDialog,
+    selectedRange,
+    selectedEvent,
+    resourceFields,
+    selectedResource,
+    triggerLoading,
+    onConfirm,
+    customEditor,
+    confirmEvent,
+    dialogMaxWidth,
+    translations,
+    timeZone,
+  } = useStore();
+  const [state, setState] = useState(initialState(fields, selectedEvent || selectedRange));
+  const [touched, setTouched] = useState(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  const handleEditorState = (name: string, value: any, validity: boolean) => {
+    setState((prev) => {
+      return {
+        ...prev,
+        [name]: { ...prev[name], value, validity },
+      };
+    });
+  };
+
+  const handleClose = (clearState?: boolean) => {
+    if (clearState) {
+      setState(initialState(fields));
+    }
+    triggerDialog(false);
+  };
+
+  const handleConfirm = async () => {
+    let body = {} as ProcessedEvent;
+    for (const key in state) {
+      body[key] = state[key].value;
+      if (!customEditor && !state[key].validity) {
+        return setTouched(true);
+      }
+    }
+    try {
+      triggerLoading(true);
+      // Auto fix date
+      body.end =
+        body.start >= body.end
+          ? addMinutes(body.start, differenceInMinutes(selectedRange?.end!, selectedRange?.start!))
+          : body.end;
+      // Specify action
+      const action: EventActions = selectedEvent?.event_id ? "edit" : "create";
+      // Trigger custom/remote when provided
+      if (onConfirm) {
+        body = await onConfirm(body, action);
+      } else {
+        // Create/Edit local data
+        body.event_id =
+          selectedEvent?.event_id || Date.now().toString(36) + Math.random().toString(36).slice(2);
+      }
+
+      body.start = revertTimeZonedDate(body.start, timeZone);
+      body.end = revertTimeZonedDate(body.end, timeZone);
+
+      confirmEvent(body, action);
+      handleClose(true);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      triggerLoading(false);
+    }
+  };
+  const renderInputs = (key: string) => {
+    const stateItem = state[key];
+    switch (stateItem.type) {
+      case "input":
+        return (
+          <EditorInput
+            value={stateItem.value}
+            name={key}
+            onChange={handleEditorState}
+            touched={touched}
+            {...stateItem.config}
+            label={translations.event[key] || stateItem.config?.label}
+          />
+        );
+      case "date":
+        return (
+          <EditorDatePicker
+            value={stateItem.value}
+            name={key}
+            onChange={(...args) => handleEditorState(...args, true)}
+            touched={touched}
+            {...stateItem.config}
+            label={translations.event[key] || stateItem.config?.label}
+          />
+        );
+      case "select":
+        const field = fields.find((f) => f.name === key);
+        return (
+          <EditorSelect
+            value={stateItem.value}
+            name={key}
+            options={field?.options || []}
+            onChange={handleEditorState}
+            touched={touched}
+            {...stateItem.config}
+            label={translations.event[key] || stateItem.config?.label}
+          />
+        );
+      default:
+        return "";
+    }
+  };
+
+  const renderEditor = () => {
+    if (customEditor) {
+      const schedulerHelpers: SchedulerHelpers = {
+        state,
+        close: () => triggerDialog(false),
+        loading: (load) => triggerLoading(load),
+        edited: selectedEvent,
+        onConfirm: confirmEvent,
+        [resourceFields.idField]: selectedResource,
+      };
+      return customEditor(schedulerHelpers);
+    }
+    return (
+      <Fragment>
+        <DialogTitle>
+          {selectedEvent ? translations.form.editTitle : translations.form.addTitle}
+        </DialogTitle>
+        <DialogContent style={{ overflowX: "hidden" }}>
+          <Grid container spacing={2}>
+            {Object.keys(state).map((key) => {
+              const item = state[key];
+              return (
+                <Grid key={key} size={{ sm: item.config?.sm, xs: 12 }}>
+                  {renderInputs(key)}
+                </Grid>
+              );
+            })}
+          </Grid>
+        </DialogContent>
+        <DialogActions>
+          <Button color="inherit" fullWidth onClick={() => handleClose()}>
+            {translations.form.cancel}
+          </Button>
+          <Button color="primary" fullWidth onClick={handleConfirm}>
+            {translations.form.confirm}
+          </Button>
+        </DialogActions>
+      </Fragment>
+    );
+  };
+
+  return (
+    <Dialog
+      open={dialog}
+      fullScreen={isMobile}
+      maxWidth={dialogMaxWidth}
+      onClose={() => {
+        triggerDialog(false);
+      }}
+    >
+      {renderEditor()}
+    </Dialog>
+  );
+};
+
+export default Editor;

package/src/lib/views/Month.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useCallback } from "react";
+import { addDays, eachWeekOfInterval, endOfMonth, startOfMonth } from "date-fns";
+import { DefaultResource } from "../types";
+import { getResourcedEvents, sortEventsByTheEarliest } from "../helpers/generals";
+import { WithResources } from "../components/common/WithResources";
+import useStore from "../hooks/useStore";
+import { MonthAgenda } from "./MonthAgenda";
+import MonthTable from "../components/month/MonthTable";
+
+const Month = () => {
+  const {
+    month,
+    selectedDate,
+    events,
+    getRemoteEvents,
+    triggerLoading,
+    handleState,
+    resources,
+    resourceFields,
+    fields,
+    agenda,
+  } = useStore();
+
+  const { weekStartOn, weekDays } = month!;
+  const monthStart = startOfMonth(selectedDate);
+  const monthEnd = endOfMonth(selectedDate);
+  const eachWeekStart = eachWeekOfInterval(
+    {
+      start: monthStart,
+      end: monthEnd,
+    },
+    { weekStartsOn: weekStartOn }
+  );
+  const daysList = weekDays.map((d) => addDays(eachWeekStart[0], d));
+
+  const fetchEvents = useCallback(async () => {
+    try {
+      triggerLoading(true);
+      const start = eachWeekStart[0];
+      const end = addDays(eachWeekStart[eachWeekStart.length - 1], daysList.length);
+      const events = await getRemoteEvents!({
+        start,
+        end,
+        view: "month",
+      });
+      if (events && events?.length) {
+        handleState(events, "events");
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      triggerLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [daysList.length, getRemoteEvents]);
+
+  useEffect(() => {
+    if (getRemoteEvents instanceof Function) {
+      fetchEvents();
+    }
+  }, [fetchEvents, getRemoteEvents]);
+
+  const renderTable = useCallback(
+    (resource?: DefaultResource) => {
+      if (agenda) {
+        let resourcedEvents = sortEventsByTheEarliest(events);
+        if (resource) {
+          resourcedEvents = getResourcedEvents(events, resource, resourceFields, fields);
+        }
+
+        return <MonthAgenda resource={resource} events={resourcedEvents} />;
+      }
+
+      return <MonthTable daysList={daysList} eachWeekStart={eachWeekStart} resource={resource} />;
+    },
+    [agenda, daysList, eachWeekStart, events, fields, resourceFields]
+  );
+
+  return resources.length ? <WithResources renderChildren={renderTable} /> : renderTable();
+};
+
+export { Month };