Skip to content

P
planner-team-one
Commit 41a1b7ca authored by “Yevgeniy's avatar “Yevgeniy
Browse files
Options

#19 added concept of week view on front

parent d1b8f15f
Show whitespace changes
Inline Side-by-side
Showing with 996 additions and 8 deletions
planner-front/package-lock.json
View file @ 41a1b7ca
......@@ -10,6 +10,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",
......@@ -2221,6 +2222,94 @@
}
}
},
"node_modules/@devexpress/dx-core": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-3.0.6.tgz",
"integrity": "sha512-Qx66s+fi1aylQr+Li6OXtUOF5t4zJkYAMN1oM7rua9iJI4raoKBm5aRuYpW0ZLMChJzBAqOHfRpICKbX/QNE4Q==",
"peer": true
},
"node_modules/@devexpress/dx-react-core": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-3.0.6.tgz",
"integrity": "sha512-cKH3PknwFbJp2R9Du8+DhvN4gHlZtz0UxCBcXhpvXncLHdwYV3kkwmXrFaG5lfHQBSzVSIg8XkSN5dBXZELAPA==",
"peer": true,
"dependencies": {
"@devexpress/dx-core": "3.0.6",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": ">=17.0.2",
"react-dom": ">=17.0.2"
}
},
"node_modules/@devexpress/dx-react-scheduler": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-3.0.6.tgz",
"integrity": "sha512-mtGb2yJwyvWVd+yKwQfN/pM+flXexMTvaewrSJPKOV48MIaoKpL1pbJCPkLKLHWAWXchlUKp/qPEgB7adimDAg==",
"peer": true,
"dependencies": {
"@devexpress/dx-scheduler-core": "3.0.6"
},
"peerDependencies": {
"@devexpress/dx-core": "3.0.6",
"@devexpress/dx-react-core": "3.0.6",
"moment": "^2.24.0",
"react": ">=17.0.2",
"react-dom": ">=17.0.2"
}
},
"node_modules/@devexpress/dx-react-scheduler-material-ui": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler-material-ui/-/dx-react-scheduler-material-ui-3.0.6.tgz",
"integrity": "sha512-ubtAzmC/WngpYR8TQrFk3d24Urt+GERK/5imgo3aJmiks2ZlSYwxISRGJNE1tLRo4WxGe0BT0RiQHHr7Z3JoCw==",
"dependencies": {
"@date-io/moment": "^1.3.11",
"clsx": "^1.0.4",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"@devexpress/dx-react-core": "3.0.6",
"@devexpress/dx-react-scheduler": "3.0.6",
"@devexpress/dx-scheduler-core": "3.0.6",
"@emotion/react": ">=11.4.1",
"@emotion/styled": ">=11.3.0",
"@mui/icons-material": ">=5.0.0",
"@mui/lab": "^5.0.0-alpha.50",
"@mui/material": ">=5.0.0",
"@mui/x-date-pickers": "^5.0.0-alpha.7",
"moment": "^2.24.0",
"react": ">=17.0.2"
}
},
"node_modules/@devexpress/dx-react-scheduler-material-ui/node_modules/@date-io/core": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
"integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
},
"node_modules/@devexpress/dx-react-scheduler-material-ui/node_modules/@date-io/moment": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
"integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
"dependencies": {
"@date-io/core": "^1.3.13"
},
"peerDependencies": {
"moment": "^2.24.0"
}
},
"node_modules/@devexpress/dx-scheduler-core": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-scheduler-core/-/dx-scheduler-core-3.0.6.tgz",
"integrity": "sha512-/6PgTsfHk+hZUQVn0Nw0xfmwM8dA5RRcdAQf99AAv9tyxJgAInE9c+BJTeox4InybVvfvIZkJdQHLtD4tqRsAQ==",
"peer": true,
"dependencies": {
"moment": "^2.24.0",
"rrule": "2.6.4"
},
"peerDependencies": {
"@devexpress/dx-core": "3.0.6"
}
},
"node_modules/@emotion/babel-plugin": {
"version": "11.10.5",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
......@@ -3300,6 +3389,87 @@
}
}
},
"node_modules/@mui/lab": {
"version": "5.0.0-alpha.107",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.107.tgz",
"integrity": "sha512-5lq0tSewkjUHBAuuAVikifM+IeOk33jcMSDgS5ouwi0VDXZjgWij+V/Nhz/8vIyBKwYv1bvhQGyDiUcPiCLX+Q==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.19.0",
"@mui/base": "5.0.0-alpha.105",
"@mui/system": "^5.10.13",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material": "^5.0.0",
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/lab/node_modules/@mui/base": {
"version": "5.0.0-alpha.105",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.105.tgz",
"integrity": "sha512-4IPBcJQIgVVXQvN6DQMoCHed52GBtwSqYs0jD0dDcMR3o76AodQtpEeWFz3p7mJoc6f/IHBl9U6jEfL1r/kM4g==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.19.0",
"@emotion/is-prop-valid": "^1.2.0",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"@popperjs/core": "^2.11.6",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/lab/node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
"peer": true
},
"node_modules/@mui/material": {
"version": "5.10.12",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.12.tgz",
......@@ -3407,9 +3577,9 @@
}
},
"node_modules/@mui/system": {
"version": "5.10.12",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.12.tgz",
"integrity": "sha512-9DcN3hF2KTTTpZ0K5Tn20B+Tz7tIqDmJLk1M6P0CYoAGUN/xrcF/6dn1zZ829rxE5tmauoDUekTfomrvPsvlSQ==",
"version": "5.10.13",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.13.tgz",
"integrity": "sha512-Xzx26Asu5fVlm0ucm+gnJmeX4Y1isrpVDvqxX4yJaOT7Fzmd8Lfq9ih3QMfZajns5LMtUiOuCQlVFRtUG5IY7A==",
"dependencies": {
"@babel/runtime": "^7.19.0",
"@mui/private-theming": "^5.10.9",
......@@ -12371,6 +12541,16 @@
"node": ">=10"
}
},
"node_modules/luxon": {
"version": "1.28.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
"integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==",
"optional": true,
"peer": true,
"engines": {
"node": "*"
}
},
"node_modules/lz-string": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
......@@ -15475,6 +15655,24 @@
"node": ">=8"
}
},
"node_modules/rrule": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/rrule/-/rrule-2.6.4.tgz",
"integrity": "sha512-sLdnh4lmjUqq8liFiOUXD5kWp/FcnbDLPwq5YAc/RrN6120XOPb86Ae5zxF7ttBVq8O3LxjjORMEit1baluahA==",
"peer": true,
"dependencies": {
"tslib": "^1.10.0"
},
"optionalDependencies": {
"luxon": "^1.21.3"
}
},
"node_modules/rrule/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"peer": true
},
"node_modules/run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
......@@ -19298,6 +19496,66 @@
"@date-io/core": "^2.16.0"
}
},
"@devexpress/dx-core": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-3.0.6.tgz",
"integrity": "sha512-Qx66s+fi1aylQr+Li6OXtUOF5t4zJkYAMN1oM7rua9iJI4raoKBm5aRuYpW0ZLMChJzBAqOHfRpICKbX/QNE4Q==",
"peer": true
},
"@devexpress/dx-react-core": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-3.0.6.tgz",
"integrity": "sha512-cKH3PknwFbJp2R9Du8+DhvN4gHlZtz0UxCBcXhpvXncLHdwYV3kkwmXrFaG5lfHQBSzVSIg8XkSN5dBXZELAPA==",
"peer": true,
"requires": {
"@devexpress/dx-core": "3.0.6",
"prop-types": "^15.7.2"
}
},
"@devexpress/dx-react-scheduler": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-3.0.6.tgz",
"integrity": "sha512-mtGb2yJwyvWVd+yKwQfN/pM+flXexMTvaewrSJPKOV48MIaoKpL1pbJCPkLKLHWAWXchlUKp/qPEgB7adimDAg==",
"peer": true,
"requires": {
"@devexpress/dx-scheduler-core": "3.0.6"
}
},
"@devexpress/dx-react-scheduler-material-ui": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler-material-ui/-/dx-react-scheduler-material-ui-3.0.6.tgz",
"integrity": "sha512-ubtAzmC/WngpYR8TQrFk3d24Urt+GERK/5imgo3aJmiks2ZlSYwxISRGJNE1tLRo4WxGe0BT0RiQHHr7Z3JoCw==",
"requires": {
"@date-io/moment": "^1.3.11",
"clsx": "^1.0.4",
"prop-types": "^15.7.2"
},
"dependencies": {
"@date-io/core": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
"integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
},
"@date-io/moment": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
"integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
"requires": {
"@date-io/core": "^1.3.13"
}
}
}
},
"@devexpress/dx-scheduler-core": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@devexpress/dx-scheduler-core/-/dx-scheduler-core-3.0.6.tgz",
"integrity": "sha512-/6PgTsfHk+hZUQVn0Nw0xfmwM8dA5RRcdAQf99AAv9tyxJgAInE9c+BJTeox4InybVvfvIZkJdQHLtD4tqRsAQ==",
"peer": true,
"requires": {
"moment": "^2.24.0",
"rrule": "2.6.4"
}
},
"@emotion/babel-plugin": {
"version": "11.10.5",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
......@@ -20085,6 +20343,46 @@
"@babel/runtime": "^7.19.0"
}
},
"@mui/lab": {
"version": "5.0.0-alpha.107",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.107.tgz",
"integrity": "sha512-5lq0tSewkjUHBAuuAVikifM+IeOk33jcMSDgS5ouwi0VDXZjgWij+V/Nhz/8vIyBKwYv1bvhQGyDiUcPiCLX+Q==",
"peer": true,
"requires": {
"@babel/runtime": "^7.19.0",
"@mui/base": "5.0.0-alpha.105",
"@mui/system": "^5.10.13",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
"dependencies": {
"@mui/base": {
"version": "5.0.0-alpha.105",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.105.tgz",
"integrity": "sha512-4IPBcJQIgVVXQvN6DQMoCHed52GBtwSqYs0jD0dDcMR3o76AodQtpEeWFz3p7mJoc6f/IHBl9U6jEfL1r/kM4g==",
"peer": true,
"requires": {
"@babel/runtime": "^7.19.0",
"@emotion/is-prop-valid": "^1.2.0",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"@popperjs/core": "^2.11.6",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
}
},
"react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
"peer": true
}
}
},
"@mui/material": {
"version": "5.10.12",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.12.tgz",
......@@ -20133,9 +20431,9 @@
}
},
"@mui/system": {
"version": "5.10.12",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.12.tgz",
"integrity": "sha512-9DcN3hF2KTTTpZ0K5Tn20B+Tz7tIqDmJLk1M6P0CYoAGUN/xrcF/6dn1zZ829rxE5tmauoDUekTfomrvPsvlSQ==",
"version": "5.10.13",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.13.tgz",
"integrity": "sha512-Xzx26Asu5fVlm0ucm+gnJmeX4Y1isrpVDvqxX4yJaOT7Fzmd8Lfq9ih3QMfZajns5LMtUiOuCQlVFRtUG5IY7A==",
"requires": {
"@babel/runtime": "^7.19.0",
"@mui/private-theming": "^5.10.9",
......@@ -26664,6 +26962,13 @@
"yallist": "^4.0.0"
}
},
"luxon": {
"version": "1.28.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
"integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==",
"optional": true,
"peer": true
},
"lz-string": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
......@@ -28711,6 +29016,24 @@
}
}
},
"rrule": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/rrule/-/rrule-2.6.4.tgz",
"integrity": "sha512-sLdnh4lmjUqq8liFiOUXD5kWp/FcnbDLPwq5YAc/RrN6120XOPb86Ae5zxF7ttBVq8O3LxjjORMEit1baluahA==",
"peer": true,
"requires": {
"luxon": "^1.21.3",
"tslib": "^1.10.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"peer": true
}
}
},
"run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
planner-front/package.json
View file @ 41a1b7ca
......@@ -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
View file @ 41a1b7ca
......@@ -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 0 → 100644
View file @ 41a1b7ca
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/WeekCalendar.js 0 → 100644
View file @ 41a1b7ca
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import {Paper} from '@mui/material';
import { ViewState ,EditingState} from '@devexpress/dx-react-scheduler';
import {
Scheduler,
WeekView,
Appointments,
CurrentTimeIndicator,
AppointmentTooltip,
AppointmentForm,
Toolbar,
DragDropProvider,
EditRecurrenceMenu,
DateNavigator,
TodayButton
} from '@devexpress/dx-react-scheduler-material-ui';
import { teal } from '@mui/material/colors';
import classNames from 'clsx';
import appointments from './demo-data/today-appointments';
import TwoHourSwitcher from '../../components/UI/WeekComponents/TwoHourSwitcher';
const PREFIX = 'Demo';
const SHIFT_KEY = 16;
const classes = {
todayCell: `${PREFIX}-todayCell`,
weekendCell: `${PREFIX}-weekendCell`,
today: `${PREFIX}-today`,
weekend: `${PREFIX}-weekend`,
line: `${PREFIX}-line`,
circle: `${PREFIX}-circle`,
nowIndicator: `${PREFIX}-nowIndicator`,
shadedCell: `${PREFIX}-shadedCell`,
shadedPart: `${PREFIX}-shadedPart`,
appointment: `${PREFIX}-appointment`,
shadedAppointment: `${PREFIX}-shadedAppointment`,
};
const StyledDiv = styled('div', {
shouldForwardProp: prop => prop !== 'top',
})(({ theme, top }) => ({
[`& .${classes.line}`]: {
height: '2px',
borderTop: `2px ${theme.palette.primary.main} dotted`,
width: '100%',
transform: 'translate(0, -1px)',
},
[`& .${classes.circle}`]: {
width: theme.spacing(1.5),
height: theme.spacing(1.5),
borderRadius: '50%',
transform: 'translate(-50%, -50%)',
background: theme.palette.primary.main,
},
[`& .${classes.nowIndicator}`]: {
position: 'absolute',
zIndex: 1,
left: 0,
top,
},
}));
const StyledWeekViewTimeTableCell = styled(WeekView.TimeTableCell)(({ theme,currentTimeIndicatorPosition }) => ({
[`&.${classes.todayCell}`]: {
backgroundColor: alpha(theme.palette.primary.main, 0.1),
'&:hover': {
backgroundColor: alpha(theme.palette.primary.main, 0.14),
},
'&:focus': {
backgroundColor: alpha(theme.palette.primary.main, 0.16),
},
},
[`&.${classes.weekendCell}`]: {
backgroundColor: alpha(theme.palette.action.disabledBackground, 0.04),
'&:hover': {
backgroundColor: alpha(theme.palette.action.disabledBackground, 0.04),
},
'&:focus': {
backgroundColor: alpha(theme.palette.action.disabledBackground, 0.04),
},
},
[`&.${classes.shadedCell}`]: {
backgroundColor: alpha(theme.palette.primary.main, 0.08),
'&:hover': {
backgroundColor: alpha(theme.palette.primary.main, 0.12),
},
'&:focus': {
backgroundColor: alpha(theme.palette.primary.main, 0.20),
outline: 0,
},
},
[`& .${classes.shadedPart}`]: {
backgroundColor: alpha(theme.palette.primary.main, 0.08),
position: 'absolute',
height: currentTimeIndicatorPosition,
width: '100%',
left: 0,
top: 0,
'td:focus &': {
backgroundColor: alpha(theme.palette.primary.main, 0.12),
},
},
}));
// const StyledWeekViewDayScaleCell = styled(WeekView.DayScaleCell)(({ theme }) => ({
// [`&.${classes.today}`]: {
// backgroundColor: alpha(theme.palette.primary.main, 0.16),
// },
// [`&.${classes.weekend}`]: {
// backgroundColor: alpha(theme.palette.action.disabledBackground, 0.06),
// },
// }));
const StyledAppointmentsAppointment = styled(Appointments.Appointment)(() => ({
[`&.${classes.appointment}`]: {
backgroundColor: teal[300],
'&:hover': {
backgroundColor: teal[400],
},
},
[`&.${classes.shadedAppointment}`]: {
backgroundColor: teal[200],
'&:hover': {
backgroundColor: teal[300],
},
},
}));
const StyledToolbarFlexibleSpace = styled(Toolbar.FlexibleSpace)(() => ({
[`&.${classes.flexibleSpace}`]: {
flex: 'none',
},
[`& .${classes.flexContainer}`]: {
display: 'flex',
alignItems: 'center',
},
}));
const StyledAppointmentsAppointmentContent = styled(Appointments.AppointmentContent)(() => ({
[`&.${classes.apptContent}`]: {
'&>div>div': {
whiteSpace: 'normal !important',
lineHeight: 1.2,
},
},
}));
const TimeIndicator = ({
top, ...restProps
// #FOLD_BLOCK
}) => (
<StyledDiv top={top} {...restProps}>
<div className={classNames(classes.nowIndicator, classes.circle)} />
<div className={classNames(classes.nowIndicator, classes.line)} />
</StyledDiv>
);
// const TimeTableCell = (props) => {
// const { startDate } = props;
// const date = new Date(startDate);
// if (date.getDate() === new Date().getDate()) {
// return <StyledWeekViewTimeTableCell {...props} className={classes.todayCell} />;
// } if (date.getDay() === 0 || date.getDay() === 6) {
// return <StyledWeekViewTimeTableCell {...props} className={classes.weekendCell} />;
// } return <StyledWeekViewTimeTableCell {...props} />;
// };
const TimeTableCell = ({
currentTimeIndicatorPosition, isShaded, ...restProps
// #FOLD_BLOCK
}) => {
const isNow = !!currentTimeIndicatorPosition;
return (
<StyledWeekViewTimeTableCell
isShaded={isShaded && !isNow}
currentTimeIndicatorPosition={currentTimeIndicatorPosition}
className={classNames({
[classes.shadedCell]: isShaded && !isNow,
})}
{...restProps}
>
{isNow && isShaded && (
<div className={classes.shadedPart} />
)}
</StyledWeekViewTimeTableCell>
);
};
const Appointment = ({
isShaded, ...restProps
// #FOLD_BLOCK
}) => (
<StyledAppointmentsAppointment
className={classNames({
[classes.appointment]: true,
[classes.shadedAppointment]: isShaded,
})}
{...restProps}
/>
);
const AppointmentContent = (({ ...restProps }) => (
<StyledAppointmentsAppointmentContent {...restProps} className={classes.apptContent} />
));
// const DayScaleCell = (props) => {
// const { startDate, today } = props;
// if (today) {
// return <StyledWeekViewDayScaleCell {...props} className={classes.today} />;
// } if (startDate.getDay() === 0 || startDate.getDay() === 6) {
// return <StyledWeekViewDayScaleCell {...props} className={classes.weekend} />;
// } return <StyledWeekViewDayScaleCell {...props} />;
// };
const FlexibleSpace = (({ ...restProps }) => (
<StyledToolbarFlexibleSpace {...restProps} className={classes.flexibleSpace}>
<div className={classes.flexContainer}>
{/* <TwoHourSwitcher/> */}
{/* <ColorLens fontSize="large" htmlColor="#FF7043" /> */}
{/* <Typography variant="h5" style={{ marginLeft: '10px' }}>Art School</Typography> */}
</div>
</StyledToolbarFlexibleSpace>
));
export default class Demo extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
data: appointments,
locale: 'ru-Ru',
isShiftPressed: false,
};
this.commitChanges = this.commitChanges.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.onKeyUp = this.onKeyUp.bind(this);
}
componentDidMount() {
window.addEventListener('keydown', this.onKeyDown);
window.addEventListener('keyup', this.onKeyUp);
}
componentWillUnmount() {
window.removeEventListener('keydown');
window.removeEventListener('keyup');
}
onKeyDown(event) {
if (event.keyCode === SHIFT_KEY) {
this.setState({ isShiftPressed: true });
}
}
onKeyUp(event) {
if (event.keyCode === SHIFT_KEY) {
this.setState({ isShiftPressed: false });
}
}
commitChanges({ added, changed, deleted }) {
this.setState((state) => {
let { data } = state;
const { isShiftPressed } = this.state;
if (added) {
const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
data = [...data, { id: startingAddedId, ...added }];
}
// if (changed) {
// data = data.map(appointment => (
// changed[appointment.id] ? { ...appointment, ...changed[appointment.id] } : appointment));
// }
if (changed) {
if (isShiftPressed) {
const changedAppointment = data.find(appointment => changed[appointment.id]);
const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
data = [
...data,
{ ...changedAppointment, id: startingAddedId, ...changed[changedAppointment.id] },
];
} else {
data = data.map(appointment => (
changed[appointment.id]
? { ...appointment, ...changed[appointment.id] }
: appointment));
}
}
if (deleted !== undefined) {
data = data.filter(appointment => appointment.id !== deleted);
}
return { data };
});
}
render() {
const { data ,locale} = this.state;
return (
<div>
<Paper>
<Scheduler
firstDayOfWeek={1}
data={data}
locale={locale}
height={660}
>
<EditingState
onCommitChanges={this.commitChanges}
/>
<ViewState
defaultCurrentDate="2022-11-10"
/>
<WeekView
startDayHour={9}
endDayHour={19}
timeTableCellComponent={TimeTableCell}
cellDuration={60}
/>
<Toolbar
flexibleSpaceComponent={FlexibleSpace}
/>
<DateNavigator/>
<TodayButton/>
<EditRecurrenceMenu />
<TwoHourSwitcher/>
<Appointments
appointmentComponent={Appointment}
appointmentContentComponent={AppointmentContent}
/>
<DragDropProvider
scrollSpeed={15}
/>
<AppointmentTooltip
showCloseButton
showDeleteButton
showOpenButton
/>
<AppointmentForm
// readOnly
/>
<CurrentTimeIndicator
indicatorComponent={TimeIndicator}
shadePreviousCells
shadePreviousAppointments
/>
</Scheduler>
</Paper>
</div>
);
}
}
\ No newline at end of file
planner-front/src/containers/WeekCalendar/demo-data/appointments.js 0 → 100644
View file @ 41a1b7ca
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 0 → 100644
View file @ 41a1b7ca
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;
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment