@canmingir/link 1.1.0

package/minimal/src/sections/calendar/hooks/use-calendar.js

@@ -0,0 +1,168 @@
+import { useRef, useState, useCallback } from 'react';
+
+import { useResponsive } from 'src/hooks/use-responsive';
+
+import { fTimestamp } from 'src/utils/format-time';
+
+// ----------------------------------------------------------------------
+
+export default function useCalendar() {
+  const calendarRef = useRef(null);
+
+  const calendarEl = calendarRef.current;
+
+  const smUp = useResponsive('up', 'sm');
+
+  const [date, setDate] = useState(new Date());
+
+  const [openForm, setOpenForm] = useState(false);
+
+  const [selectEventId, setSelectEventId] = useState('');
+
+  const [selectedRange, setSelectedRange] = useState(null);
+
+  const [view, setView] = useState(smUp ? 'dayGridMonth' : 'listWeek');
+
+  const onOpenForm = useCallback(() => {
+    setOpenForm(true);
+  }, []);
+
+  const onCloseForm = useCallback(() => {
+    setOpenForm(false);
+    setSelectedRange(null);
+    setSelectEventId('');
+  }, []);
+
+  const onInitialView = useCallback(() => {
+    if (calendarEl) {
+      const calendarApi = calendarEl.getApi();
+
+      const newView = smUp ? 'dayGridMonth' : 'listWeek';
+      calendarApi.changeView(newView);
+      setView(newView);
+    }
+  }, [calendarEl, smUp]);
+
+  const onChangeView = useCallback(
+    (newView) => {
+      if (calendarEl) {
+        const calendarApi = calendarEl.getApi();
+
+        calendarApi.changeView(newView);
+        setView(newView);
+      }
+    },
+    [calendarEl]
+  );
+
+  const onDateToday = useCallback(() => {
+    if (calendarEl) {
+      const calendarApi = calendarEl.getApi();
+
+      calendarApi.today();
+      setDate(calendarApi.getDate());
+    }
+  }, [calendarEl]);
+
+  const onDatePrev = useCallback(() => {
+    if (calendarEl) {
+      const calendarApi = calendarEl.getApi();
+
+      calendarApi.prev();
+      setDate(calendarApi.getDate());
+    }
+  }, [calendarEl]);
+
+  const onDateNext = useCallback(() => {
+    if (calendarEl) {
+      const calendarApi = calendarEl.getApi();
+
+      calendarApi.next();
+      setDate(calendarApi.getDate());
+    }
+  }, [calendarEl]);
+
+  const onSelectRange = useCallback(
+    (arg) => {
+      if (calendarEl) {
+        const calendarApi = calendarEl.getApi();
+
+        calendarApi.unselect();
+      }
+      onOpenForm();
+      setSelectedRange({
+        start: fTimestamp(arg.start),
+        end: fTimestamp(arg.end),
+      });
+    },
+    [calendarEl, onOpenForm]
+  );
+
+  const onClickEvent = useCallback(
+    (arg) => {
+      const { event } = arg;
+
+      onOpenForm();
+      setSelectEventId(event.id);
+    },
+    [onOpenForm]
+  );
+
+  const onResizeEvent = useCallback((arg, updateEvent) => {
+    const { event } = arg;
+
+    updateEvent({
+      id: event.id,
+      allDay: event.allDay,
+      start: fTimestamp(event.start),
+      end: fTimestamp(event.end),
+    });
+  }, []);
+
+  const onDropEvent = useCallback((arg, updateEvent) => {
+    const { event } = arg;
+
+    updateEvent({
+      id: event.id,
+      allDay: event.allDay,
+      start: fTimestamp(event.start),
+      end: fTimestamp(event.end),
+    });
+  }, []);
+
+  const onClickEventInFilters = useCallback(
+    (eventId) => {
+      if (eventId) {
+        onOpenForm();
+        setSelectEventId(eventId);
+      }
+    },
+    [onOpenForm]
+  );
+
+  return {
+    calendarRef,
+    //
+    view,
+    date,
+    //
+    onDatePrev,
+    onDateNext,
+    onDateToday,
+    onDropEvent,
+    onClickEvent,
+    onChangeView,
+    onSelectRange,
+    onResizeEvent,
+    onInitialView,
+    //
+    openForm,
+    onOpenForm,
+    onCloseForm,
+    //
+    selectEventId,
+    selectedRange,
+    //
+    onClickEventInFilters,
+  };
+}

package/minimal/src/sections/calendar/hooks/use-event.js

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import merge from 'lodash/merge';
+
+import { CALENDAR_COLOR_OPTIONS } from 'src/_mock/_calendar';
+
+// ----------------------------------------------------------------------
+
+export default function useEvent(events, selectEventId, selectedRange, openForm) {
+  const currentEvent = events.find((event) => event.id === selectEventId);
+
+  const defaultValues = useMemo(
+    () => ({
+      id: '',
+      title: '',
+      description: '',
+      color: CALENDAR_COLOR_OPTIONS[1],
+      allDay: false,
+      start: selectedRange ? selectedRange.start : new Date().getTime(),
+      end: selectedRange ? selectedRange.end : new Date().getTime(),
+    }),
+    [selectedRange]
+  );
+
+  if (!openForm) {
+    return undefined;
+  }
+
+  if (currentEvent || selectedRange) {
+    return merge({}, defaultValues, currentEvent);
+  }
+
+  return defaultValues;
+}

package/minimal/src/sections/calendar/styles.js

@@ -0,0 +1,163 @@
+import { alpha, styled } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export const StyledCalendar = styled('div')(({ theme }) => ({
+  width: 'calc(100% + 2px)',
+  marginLeft: -1,
+  marginBottom: -1,
+
+  '& .fc': {
+    '--fc-border-color': alpha(theme.palette.grey[500], 0.16),
+    '--fc-now-indicator-color': theme.palette.error.main,
+    '--fc-today-bg-color': alpha(theme.palette.grey[500], 0.08),
+    '--fc-page-bg-color': theme.palette.background.default,
+    '--fc-neutral-bg-color': theme.palette.background.neutral,
+    '--fc-list-event-hover-bg-color': theme.palette.action.hover,
+    '--fc-highlight-color': theme.palette.action.hover,
+  },
+
+  '& .fc .fc-license-message': { display: 'none' },
+  '& .fc a': { color: theme.palette.text.primary },
+
+  // Table Head
+  '& .fc .fc-col-header ': {
+    boxShadow: `inset 0 -1px 0 ${theme.palette.divider}`,
+    '& th': { borderColor: 'transparent' },
+    '& .fc-col-header-cell-cushion': {
+      ...theme.typography.subtitle2,
+      padding: '13px 0',
+    },
+  },
+
+  // List Empty
+  '& .fc .fc-list-empty': {
+    ...theme.typography.h6,
+    backgroundColor: 'transparent',
+    color: theme.palette.text.secondary,
+  },
+
+  // Event
+  '& .fc .fc-event': {
+    borderColor: 'transparent !important',
+    backgroundColor: 'transparent !important',
+  },
+  '& .fc .fc-event .fc-event-main': {
+    padding: '2px 4px',
+    borderRadius: 6,
+    backgroundColor: theme.palette.common.white,
+    '&:before': {
+      top: 0,
+      left: 0,
+      width: '100%',
+      content: "''",
+      opacity: 0.24,
+      height: '100%',
+      borderRadius: 6,
+      position: 'absolute',
+      backgroundColor: 'currentColor',
+      transition: theme.transitions.create(['opacity']),
+      '&:hover': {
+        '&:before': {
+          opacity: 0.32,
+        },
+      },
+    },
+  },
+  '& .fc .fc-event .fc-event-main-frame': {
+    fontSize: 13,
+    lineHeight: '20px',
+    filter: 'brightness(0.48)',
+  },
+  '& .fc .fc-daygrid-event .fc-event-title': {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+  '& .fc .fc-event .fc-event-time': {
+    overflow: 'unset',
+    fontWeight: theme.typography.fontWeightBold,
+  },
+
+  // Popover
+  '& .fc .fc-popover': {
+    border: 0,
+    overflow: 'hidden',
+    boxShadow: theme.customShadows.dropdown,
+    borderRadius: theme.shape.borderRadius * 1.5,
+    backgroundColor: theme.palette.background.paper,
+  },
+  '& .fc .fc-popover-header': {
+    ...theme.typography.subtitle2,
+    padding: theme.spacing(1),
+    backgroundColor: alpha(theme.palette.grey[500], 0.08),
+  },
+  '& .fc .fc-popover-close': {
+    opacity: 0.48,
+    transition: theme.transitions.create(['opacity']),
+    '&:hover': { opacity: 1 },
+  },
+  '& .fc .fc-more-popover .fc-popover-body': {
+    padding: theme.spacing(1),
+  },
+  '& .fc .fc-popover-body': {
+    '& .fc-daygrid-event.fc-event-start, & .fc-daygrid-event.fc-event-end': {
+      margin: '2px 0',
+    },
+  },
+
+  // Month View
+  '& .fc .fc-day-other .fc-daygrid-day-top': {
+    opacity: 1,
+    '& .fc-daygrid-day-number': {
+      color: theme.palette.text.disabled,
+    },
+  },
+  '& .fc .fc-daygrid-day-number': {
+    ...theme.typography.body2,
+    padding: theme.spacing(1, 1, 0),
+  },
+  '& .fc .fc-daygrid-event': {
+    marginTop: 4,
+  },
+  '& .fc .fc-daygrid-event.fc-event-start, & .fc .fc-daygrid-event.fc-event-end': {
+    marginLeft: 4,
+    marginRight: 4,
+  },
+  '& .fc .fc-daygrid-more-link': {
+    ...theme.typography.caption,
+    color: theme.palette.text.secondary,
+    '&:hover': {
+      backgroundColor: 'unset',
+      textDecoration: 'underline',
+      color: theme.palette.text.primary,
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+  },
+
+  // Week & Day View
+  '& .fc .fc-timegrid-axis-cushion': {
+    ...theme.typography.body2,
+    color: theme.palette.text.secondary,
+  },
+  '& .fc .fc-timegrid-slot-label-cushion': {
+    ...theme.typography.body2,
+  },
+
+  // Agenda View
+  '& .fc-direction-ltr .fc-list-day-text, .fc-direction-rtl .fc-list-day-side-text, .fc-direction-ltr .fc-list-day-side-text, .fc-direction-rtl .fc-list-day-text':
+    {
+      ...theme.typography.subtitle2,
+    },
+  '& .fc .fc-list-event': {
+    ...theme.typography.body2,
+    '& .fc-list-event-time': {
+      color: theme.palette.text.secondary,
+    },
+  },
+  '& .fc .fc-list-table': {
+    '& th, td': {
+      borderColor: 'transparent',
+    },
+  },
+}));

package/minimal/src/sections/calendar/view/calendar-view.jsx

@@ -0,0 +1,265 @@
+import Calendar from '@fullcalendar/react'; // => request placed at the top
+import listPlugin from '@fullcalendar/list';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import timelinePlugin from '@fullcalendar/timeline';
+import { useState, useEffect, useCallback } from 'react';
+import interactionPlugin from '@fullcalendar/interaction';
+
+import Card from '@mui/material/Card';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import { useTheme } from '@mui/material/styles';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import { useBoolean } from 'src/hooks/use-boolean';
+import { useResponsive } from 'src/hooks/use-responsive';
+
+import { fTimestamp } from 'src/utils/format-time';
+
+import { CALENDAR_COLOR_OPTIONS } from 'src/_mock/_calendar';
+import { updateEvent, useGetEvents } from 'src/api/calendar';
+
+import Iconify from 'src/components/iconify';
+import { useSettingsContext } from 'src/components/settings';
+
+import { StyledCalendar } from '../styles';
+import CalendarForm from '../calendar-form';
+import { useEvent, useCalendar } from '../hooks';
+import CalendarToolbar from '../calendar-toolbar';
+import CalendarFilters from '../calendar-filters';
+import CalendarFiltersResult from '../calendar-filters-result';
+
+// ----------------------------------------------------------------------
+
+const defaultFilters = {
+  colors: [],
+  startDate: null,
+  endDate: null,
+};
+
+// ----------------------------------------------------------------------
+
+export default function CalendarView() {
+  const theme = useTheme();
+
+  const settings = useSettingsContext();
+
+  const smUp = useResponsive('up', 'sm');
+
+  const openFilters = useBoolean();
+
+  const [filters, setFilters] = useState(defaultFilters);
+
+  const { events, eventsLoading } = useGetEvents();
+
+  const dateError =
+    filters.startDate && filters.endDate
+      ? filters.startDate.getTime() > filters.endDate.getTime()
+      : false;
+
+  const {
+    calendarRef,
+    //
+    view,
+    date,
+    //
+    onDatePrev,
+    onDateNext,
+    onDateToday,
+    onDropEvent,
+    onChangeView,
+    onSelectRange,
+    onClickEvent,
+    onResizeEvent,
+    onInitialView,
+    //
+    openForm,
+    onOpenForm,
+    onCloseForm,
+    //
+    selectEventId,
+    selectedRange,
+    //
+    onClickEventInFilters,
+  } = useCalendar();
+
+  const currentEvent = useEvent(events, selectEventId, selectedRange, openForm);
+
+  useEffect(() => {
+    onInitialView();
+  }, [onInitialView]);
+
+  const handleFilters = useCallback((name, value) => {
+    setFilters((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+  }, []);
+
+  const handleResetFilters = useCallback(() => {
+    setFilters(defaultFilters);
+  }, []);
+
+  const canReset = !!filters.colors.length || (!!filters.startDate && !!filters.endDate);
+
+  const dataFiltered = applyFilter({
+    inputData: events,
+    filters,
+    dateError,
+  });
+
+  const renderResults = (
+    <CalendarFiltersResult
+      filters={filters}
+      onFilters={handleFilters}
+      //
+      canReset={canReset}
+      onResetFilters={handleResetFilters}
+      //
+      results={dataFiltered.length}
+      sx={{ mb: { xs: 3, md: 5 } }}
+    />
+  );
+
+  return (
+    <>
+      <Container maxWidth={settings.themeStretch ? false : 'xl'}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+          sx={{
+            mb: { xs: 3, md: 5 },
+          }}
+        >
+          <Typography variant="h4">Calendar</Typography>
+          <Button
+            variant="contained"
+            startIcon={<Iconify icon="mingcute:add-line" />}
+            onClick={onOpenForm}
+          >
+            New Event
+          </Button>
+        </Stack>
+
+        {canReset && renderResults}
+
+        <Card>
+          <StyledCalendar>
+            <CalendarToolbar
+              date={date}
+              view={view}
+              loading={eventsLoading}
+              onNextDate={onDateNext}
+              onPrevDate={onDatePrev}
+              onToday={onDateToday}
+              onChangeView={onChangeView}
+              onOpenFilters={openFilters.onTrue}
+            />
+
+            <Calendar
+              weekends
+              editable
+              droppable
+              selectable
+              rerenderDelay={10}
+              allDayMaintainDuration
+              eventResizableFromStart
+              ref={calendarRef}
+              initialDate={date}
+              initialView={view}
+              dayMaxEventRows={3}
+              eventDisplay="block"
+              events={dataFiltered}
+              headerToolbar={false}
+              select={onSelectRange}
+              eventClick={onClickEvent}
+              height={smUp ? 720 : 'auto'}
+              eventDrop={(arg) => {
+                onDropEvent(arg, updateEvent);
+              }}
+              eventResize={(arg) => {
+                onResizeEvent(arg, updateEvent);
+              }}
+              plugins={[
+                listPlugin,
+                dayGridPlugin,
+                timelinePlugin,
+                timeGridPlugin,
+                interactionPlugin,
+              ]}
+            />
+          </StyledCalendar>
+        </Card>
+      </Container>
+
+      <Dialog
+        fullWidth
+        maxWidth="xs"
+        open={openForm}
+        onClose={onCloseForm}
+        transitionDuration={{
+          enter: theme.transitions.duration.shortest,
+          exit: theme.transitions.duration.shortest - 80,
+        }}
+      >
+        <DialogTitle sx={{ minHeight: 76 }}>
+          {openForm && <> {currentEvent?.id ? 'Edit Event' : 'Add Event'}</>}
+        </DialogTitle>
+
+        <CalendarForm
+          currentEvent={currentEvent}
+          colorOptions={CALENDAR_COLOR_OPTIONS}
+          onClose={onCloseForm}
+        />
+      </Dialog>
+
+      <CalendarFilters
+        open={openFilters.value}
+        onClose={openFilters.onFalse}
+        //
+        filters={filters}
+        onFilters={handleFilters}
+        //
+        canReset={canReset}
+        onResetFilters={handleResetFilters}
+        //
+        dateError={dateError}
+        //
+        events={events}
+        colorOptions={CALENDAR_COLOR_OPTIONS}
+        onClickEvent={onClickEventInFilters}
+      />
+    </>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function applyFilter({ inputData, filters, dateError }) {
+  const { colors, startDate, endDate } = filters;
+
+  const stabilizedThis = inputData.map((el, index) => [el, index]);
+
+  inputData = stabilizedThis.map((el) => el[0]);
+
+  if (colors.length) {
+    inputData = inputData.filter((event) => colors.includes(event.color));
+  }
+
+  if (!dateError) {
+    if (startDate && endDate) {
+      inputData = inputData.filter(
+        (event) =>
+          fTimestamp(event.start) >= fTimestamp(startDate) &&
+          fTimestamp(event.end) <= fTimestamp(endDate)
+      );
+    }
+  }
+
+  return inputData;
+}

package/minimal/src/sections/calendar/view/index.js

@@ -0,0 +1 @@
+export { default as CalendarView } from './calendar-view';