Added devexpress appointment scheduler

src/components/utilities/Calendar.tsx

@@ -0,0 +1,25 @@
+import {
+  Appointments,
+  Scheduler,
+  WeekView,
+} from '@devexpress/dx-react-scheduler-material-ui';
+import Paper from '@mui/material/Paper';
+import * as React from 'react';
+
+import CurrentAppointment from './CurrentAppointment';
+
+const Calendar = () => {
+  return (
+    <>
+      <Paper>
+        <Scheduler data={CurrentAppointment} height={660}>
+          <WeekView startDayHour={9} endDayHour={19} />
+          <Appointments />
+        </Scheduler>
+      </Paper>
+      ;
+    </>
+  );
+};
+
+export default Calendar;

src/components/utilities/Calender.ts

@@ -0,0 +1,142 @@
+export const calendarAppointments = [
+  {
+    title: 'Website Re-Design Plan',
+    startDate: new Date(2018, 5, 25, 9, 35),
+    endDate: new Date(2018, 5, 25, 11, 30),
+    id: 0,
+    location: 'Room 1',
+  },
+  {
+    title: 'Book Flights to San Fran for Sales Trip',
+    startDate: new Date(2018, 5, 25, 12, 11),
+    endDate: new Date(2018, 5, 25, 13, 0),
+    id: 1,
+    location: 'Room 1',
+  },
+  {
+    title: 'Install New Router in Dev Room',
+    startDate: new Date(2018, 5, 25, 14, 30),
+    endDate: new Date(2018, 5, 25, 15, 35),
+    id: 2,
+    location: 'Room 2',
+  },
+  {
+    title: 'Approve Personal Computer Upgrade Plan',
+    startDate: new Date(2018, 5, 26, 10, 0),
+    endDate: new Date(2018, 5, 26, 11, 0),
+    id: 3,
+    location: 'Room 2',
+  },
+  {
+    title: 'Final Budget Review',
+    startDate: new Date(2018, 5, 26, 12, 0),
+    endDate: new Date(2018, 5, 26, 13, 35),
+    id: 4,
+    location: 'Room 2',
+  },
+  {
+    title: 'New Brochures',
+    startDate: new Date(2018, 5, 26, 14, 30),
+    endDate: new Date(2018, 5, 26, 15, 45),
+    id: 5,
+    location: 'Room 2',
+  },
+  {
+    title: 'Install New Database',
+    startDate: new Date(2018, 5, 27, 9, 45),
+    endDate: new Date(2018, 5, 27, 11, 15),
+    id: 6,
+    location: 'Room 1',
+  },
+  {
+    title: 'Approve New Online Marketing Strategy',
+    startDate: new Date(2018, 5, 27, 12, 0),
+    endDate: new Date(2018, 5, 27, 14, 0),
+    id: 7,
+    location: 'Room 3',
+  },
+  {
+    title: 'Upgrade Personal Computers',
+    startDate: new Date(2018, 5, 27, 15, 15),
+    endDate: new Date(2018, 5, 27, 16, 30),
+    id: 8,
+    location: 'Room 3',
+  },
+  {
+    title: 'Customer Workshop',
+    startDate: new Date(2018, 5, 28, 11, 0),
+    endDate: new Date(2018, 5, 28, 12, 0),
+    id: 9,
+    location: 'Room 3',
+  },
+  {
+    title: 'Prepare 2015 Marketing Plan',
+    startDate: new Date(2018, 5, 28, 11, 0),
+    endDate: new Date(2018, 5, 28, 13, 30),
+    id: 10,
+    location: 'Room 1',
+  },
+  {
+    title: 'Brochure Design Review',
+    startDate: new Date(2018, 5, 28, 14, 0),
+    endDate: new Date(2018, 5, 28, 15, 30),
+    id: 11,
+    location: 'Room 2',
+  },
+  {
+    title: 'Create Icons for Website',
+    startDate: new Date(2018, 5, 29, 10, 0),
+    endDate: new Date(2018, 5, 29, 11, 30),
+    id: 12,
+    location: 'Room 2',
+  },
+  {
+    title: 'Upgrade Server Hardware',
+    startDate: new Date(2018, 5, 29, 14, 30),
+    endDate: new Date(2018, 5, 29, 16, 0),
+    id: 13,
+    location: 'Room 3',
+  },
+  {
+    title: 'Submit New Website Design',
+    startDate: new Date(2018, 5, 29, 16, 30),
+    endDate: new Date(2018, 5, 29, 18, 0),
+    id: 14,
+    location: 'Room 3',
+  },
+  {
+    title: 'Launch New Website',
+    startDate: new Date(2018, 5, 29, 12, 20),
+    endDate: new Date(2018, 5, 29, 14, 0),
+    id: 15,
+    location: 'Room 2',
+  },
+  {
+    title: 'Website Re-Design Plan',
+    startDate: new Date(2018, 6, 2, 9, 30),
+    endDate: new Date(2018, 6, 2, 15, 30),
+    id: 16,
+    location: 'Room 1',
+  },
+  {
+    title: 'Book Flights to San Fran for Sales Trip',
+    startDate: new Date(2018, 6, 2, 12, 0),
+    endDate: new Date(2018, 6, 2, 13, 0),
+    id: 17,
+    location: 'Room 3',
+  },
+  {
+    title: 'Install New Router in Dev Room',
+    startDate: new Date(2018, 6, 2, 14, 30),
+    endDate: new Date(2018, 6, 2, 17, 30),
+    id: 18,
+    location: 'Room 2',
+  },
+  {
+    title: 'Approve Personal Computer Upgrade Plan',
+    startDate: new Date(2018, 6, 2, 16, 0),
+    endDate: new Date(2018, 6, 3, 9, 0),
+    id: 19,
+    location: 'Room 2',
+  },
+];

src/components/utilities/CurrentAppointment.ts

@@ -0,0 +1,34 @@
+import moment from 'moment';
+
+import { calendarAppointments } from './Calender';
+const currentDate = moment();
+let date = currentDate.date();
+
+const makeTodayAppointment = (startDate, endDate) => {
+  const days = moment(startDate).diff(endDate, 'days');
+  const nextStartDate = moment(startDate)
+    .year(currentDate.year())
+    .month(currentDate.month())
+    .date(date);
+  const nextEndDate = moment(endDate)
+    .year(currentDate.year())
+    .month(currentDate.month())
+    .date(date + days);
+
+  return {
+    startDate: nextStartDate.toDate(),
+    endDate: nextEndDate.toDate(),
+  };
+};
+
+export default calendarAppointments.map(
+  ({ startDate, endDate, ...restArgs }) => {
+    const result = {
+      ...makeTodayAppointment(startDate, endDate),
+      ...restArgs,
+    };
+    date += 1;
+    if (date > 31) date = 1;
+    return result;
+  }
+);

src/pages/app/clients/Appointments/AppointmentList.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 
 import Button from '../../../../components/buttons/Button';
-import CalenderGrid from '../../../../components/calender';
 import CustomTable from '../../../../components/customtable';
 import SwitchButton from '../../../../components/switch';
+import Calendar from '../../../../components/utilities/Calendar';
 import FilterMenu from '../../../../components/utilities/FilterMenu';
 import { TableMenu } from '../../../../ui/styled/global';
 import { PageWrapper } from '../../styles';
@@ -49,7 +49,7 @@ const Appointments = ({
               onRowClicked={onRowClicked}
             />
           ) : (
-            <CalenderGrid />
+            <Calendar />
           )}
         </div>
       </PageWrapper>