From f3e4db96ae389bc001ded3c76d16c4e2812b4cd1 Mon Sep 17 00:00:00 2001 From: inuoluwadunsimi Date: Sun, 11 Sep 2022 21:27:15 +0100 Subject: [PATCH] added appointment calendar --- src/components/utilities/Calendar.tsx | 25 +++ src/components/utilities/Calender.ts | 142 ++++++++++++++++++ .../utilities/CurrentAppointment.ts | 34 +++++ .../clients/Appointments/AppointmentList.tsx | 4 +- 4 files changed, 203 insertions(+), 2 deletions(-) create mode 100644 src/components/utilities/Calendar.tsx create mode 100644 src/components/utilities/Calender.ts create mode 100644 src/components/utilities/CurrentAppointment.ts 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} /> ) : ( - + )}