#19 added concept of week view on front

planner-front/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "-": "^0.0.1",
     "@date-io/moment": "^2.16.1",
+    "@devexpress/dx-react-scheduler-material-ui": "^3.0.6",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.9",

planner-front/src/App.js

@@ -6,6 +6,7 @@ import MyTasks from './containers/MyTasks/MyTasks';
 import Login from './containers/Login/Login';
 import Register from './containers/Register/Register';
 import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
+import WeekCalendar from "./containers/WeekCalendar/WeekCalendar";
 
 const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
   const user = useSelector(state => state.users?.user);
@@ -36,7 +37,8 @@ const App = () => {
                   isAllowed={user}
                   redirectUrl={"/sign-in"}
               >
-                  <h1>week page</h1>
+                  {/* <h1>week page</h1> */}
+                  <WeekCalendar/>
               </ProtectedRoute>
             }/>
 
@@ -46,6 +48,7 @@ const App = () => {
                   redirectUrl={"/sign-in"}
               >
                  <h1>week page</h1>
+
               </ProtectedRoute>
             }/>
 

planner-front/src/components/UI/WeekComponents/TwoHourSwitcher.js

+import React,{  useState} from 'react';
+import {Switch, FormControlLabel} from '@mui/material' 
+
+const TwoHourSwitcher = ()=>{
+    const [twoHours, setTwoHour] = useState(true);
+      return (
+        <FormControlLabel
+        sx={{
+          display: 'block',
+        }}
+        control={
+        <Switch
+        checked={twoHours}
+        onChange={() => setTwoHour(!twoHours)}
+        name="по 2 часа"
+        color="primary"
+      />
+    }
+        label="по 2 часа"
+      />
+      )
+
+    }
+
+    export default TwoHourSwitcher;
\ No newline at end of file

planner-front/src/containers/WeekCalendar/demo-data/appointments.js

+export const appointments = [
+    {
+      title: 'Website Re-Design Plan',
+      startDate: new Date(2018, 5, 25, 9, 0),
+      endDate: new Date(2018, 5, 25, 11, 0),
+      id: 0,
+      location: 'Room 1',
+    }, {
+      title: 'Book Flights to San Fran for Sales Trip',
+      startDate: new Date(2018, 5, 25, 12, 0),
+      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, 0),
+      endDate: new Date(2018, 5, 25, 15, 0),
+      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, 0),
+      id: 4,
+      location: 'Room 2',
+    }, {
+      title: 'New Brochures',
+      startDate: new Date(2018, 5, 26, 14, 0),
+      endDate: new Date(2018, 5, 26, 15, 0),
+      id: 5,
+      location: 'Room 2',
+    }, {
+      title: 'Install New Database',
+      startDate: new Date(2018, 5, 27, 9, 0),
+      endDate: new Date(2018, 5, 27, 11, 0),
+      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, 0),
+      endDate: new Date(2018, 5, 27, 16, 0),
+      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, 0),
+      id: 10,
+      location: 'Room 1',
+    }, {
+      title: 'Brochure Design Review',
+      startDate: new Date(2018, 5, 28, 14, 0),
+      endDate: new Date(2018, 5, 28, 15, 0),
+      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, 0),
+      id: 12,
+      location: 'Room 2',
+    }, {
+      title: 'Upgrade Server Hardware',
+      startDate: new Date(2018, 5, 29, 14, 0),
+      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, 0),
+      endDate: new Date(2018, 5, 29, 18, 0),
+      id: 14,
+      location: 'Room 3',
+    }, {
+      title: 'Launch New Website',
+      startDate: new Date(2018, 5, 29, 12, 0),
+      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, 0),
+      endDate: new Date(2018, 6, 2, 15, 0),
+      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, 0),
+      endDate: new Date(2018, 6, 2, 17, 0),
+      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',
+    }, {
+      title: 'Final Budget Review',
+      startDate: new Date(2018, 6, 3, 10, 0),
+      endDate: new Date(2018, 6, 3, 13, 0),
+      id: 20,
+      location: 'Room 1',
+    }, {
+      title: 'New Brochures',
+      startDate: new Date(2018, 6, 3, 14, 0),
+      endDate: new Date(2018, 6, 3, 15, 0),
+      id: 21,
+      location: 'Room 3',
+    }, {
+      title: 'Install New Database',
+      startDate: new Date(2018, 6, 3, 15, 0),
+      endDate: new Date(2018, 6, 4, 12, 0),
+      id: 22,
+      location: 'Room 3',
+    }, {
+      title: 'Approve New Online Marketing Strategy',
+      startDate: new Date(2018, 6, 4, 12, 0),
+      endDate: new Date(2018, 6, 4, 14, 0),
+      id: 23,
+      location: 'Room 3',
+    }, {
+      title: 'Upgrade Personal Computers',
+      startDate: new Date(2018, 6, 4, 15, 0),
+      endDate: new Date(2018, 6, 4, 20, 0),
+      id: 24,
+      location: 'Room 2',
+    }, {
+      title: 'Customer Workshop',
+      startDate: new Date(2018, 6, 5, 6, 0),
+      endDate: new Date(2018, 6, 5, 14, 0),
+      id: 25,
+      location: 'Room 1',
+    }, {
+      title: 'Customer Workshop',
+      startDate: new Date(2018, 6, 5, 14, 0),
+      endDate: new Date(2018, 6, 5, 16, 0),
+      id: 26,
+      location: 'Room 1',
+    }, {
+      title: 'Customer Workshop 2',
+      startDate: new Date(2018, 6, 5, 10, 0),
+      endDate: new Date(2018, 6, 5, 11, 0),
+      id: 27,
+      location: 'Room 2',
+    }, {
+      title: 'Prepare 2015 Marketing Plan',
+      startDate: new Date(2018, 6, 5, 20, 0),
+      endDate: new Date(2018, 6, 6, 13, 0),
+      id: 28,
+      location: 'Room 3',
+    }, {
+      title: 'Brochure Design Review',
+      startDate: new Date(2018, 6, 6, 14, 0),
+      endDate: new Date(2018, 6, 6, 15, 0),
+      id: 29,
+      location: 'Room 3',
+    }, {
+      title: 'Create Icons for Website',
+      startDate: new Date(2018, 6, 6, 10, 0),
+      endDate: new Date(2018, 6, 7, 14, 0),
+      id: 30,
+      location: 'Room 1',
+    }, {
+      title: 'Upgrade Server Hardware',
+      startDate: new Date(2018, 6, 3, 9, 0),
+      endDate: new Date(2018, 6, 3, 12, 0),
+      id: 31,
+      location: 'Room 2',
+    }, {
+      title: 'Submit New Website Design',
+      startDate: new Date(2018, 6, 3, 12, 0),
+      endDate: new Date(2018, 6, 3, 18, 0),
+      id: 32,
+      location: 'Room 2',
+    }, {
+      title: 'Launch New Website',
+      startDate: new Date(2018, 6, 3, 12, 0),
+      endDate: new Date(2018, 6, 3, 14, 0),
+      id: 33,
+      location: 'Room 2',
+    }, {
+      title: 'Book Flights to San Fran for Sales Trip',
+      startDate: new Date(2018, 5, 26, 0, 0),
+      endDate: new Date(2018, 5, 27, 0, 0),
+      id: 34,
+      location: 'Room 1',
+    }, {
+      title: 'Customer Workshop',
+      startDate: new Date(2018, 5, 29, 10, 0),
+      endDate: new Date(2018, 5, 30, 14, 0),
+      id: 35,
+      location: 'Room 1',
+    }, {
+      title: 'Google AdWords Strategy',
+      startDate: new Date(2018, 6, 3, 0, 0),
+      endDate: new Date(2018, 6, 4, 10, 0),
+      id: 36,
+      location: 'Room 3',
+    }, {
+      title: 'Rollout of New Website and Marketing Brochures',
+      startDate: new Date(2018, 6, 5, 10, 0),
+      endDate: new Date(2018, 6, 9, 14, 0),
+      id: 37,
+      location: 'Room 3',
+    }, {
+      title: 'Update NDA Agreement',
+      startDate: new Date(2018, 6, 1, 10, 0),
+      endDate: new Date(2018, 6, 3, 14, 0),
+      id: 38,
+      location: 'Room 2',
+    }, {
+      title: 'Customer Workshop',
+      startDate: new Date(2018, 6, 1),
+      endDate: new Date(2018, 6, 2),
+      allDay: true,
+      id: 39,
+      location: 'Room 1',
+    },
+  ];
+  
\ No newline at end of file

planner-front/src/containers/WeekCalendar/demo-data/today-appointments.js

+import moment from 'moment';
+import { appointments } from './appointments';
+
+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 appointments.map(({ startDate, endDate, ...restArgs }) => {
+  const result = {
+    ...makeTodayAppointment(startDate, endDate),
+    ...restArgs,
+  };
+  date += 1;
+  if (date > 31) date = 1;
+  return result;
+});