diff --git a/src/components/utilities/Calendar.tsx b/src/components/utilities/Calendar.tsx
new file mode 100644
index 00000000..51eeb5e5
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+
+
+ ;
+
+ );
+};
+
+export default Calendar;
diff --git a/src/components/utilities/Calender.ts b/src/components/utilities/Calender.ts
new file mode 100644
index 00000000..117ee2eb
--- /dev/null
+++ b/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',
+ },
+];
diff --git a/src/components/utilities/CurrentAppointment.ts b/src/components/utilities/CurrentAppointment.ts
new file mode 100644
index 00000000..ac6f7ef1
--- /dev/null
+++ b/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;
+ }
+);
diff --git a/src/pages/app/clients/Appointments/AppointmentList.tsx b/src/pages/app/clients/Appointments/AppointmentList.tsx
index d633abc5..410b9f6c 100644
--- a/src/pages/app/clients/Appointments/AppointmentList.tsx
+++ b/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}
/>
) : (
-
+
)}