meeting-planner
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a basic FullCalendar to Schedule screen

This commit is contained in:
rui hildt 2020-05-28 15:42:36 +02:00
parent a0cf11a9df
commit 055e92ee01
4 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
package-lock.json generated
View File

@ -1274,6 +1274,42 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"@fullcalendar/common": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.0.0-beta.4.tgz",
"integrity": "sha512-2kvOx3Qfrt94MoXT5bWQ0ry4G8YhMQ4Qrtz/fgfQO+5ZBIqTgfSGpwcciyeHcvxr1DmTf8s7flB71TbC++tQ2Q==",
"requires": {
"tslib": "^1.9.3"
}
},
"@fullcalendar/core": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.0.0-beta.4.tgz",
"integrity": "sha512-5VxTdyZkUMmWJoi2/UtEK6JPCgsIXSfD4TXMmQCpvJt6MnkAfzHjr262ryvV4F0/MfK2YGhDbypJN1E8BPdarw==",
"requires": {
"@fullcalendar/common": "5.0.0-beta.4",
"preact": "^10.0.5",
"tslib": "^1.9.3"
}
},
"@fullcalendar/daygrid": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.0.0-beta.4.tgz",
"integrity": "sha512-ZWCF4dUCDngPqOJ3iUGl/ZiSOah8mgo9fayPR3WLazGMoQTsSAqMBGSuhFaNNdMDWQ+dhcT2JBa8e9DNoe2S+g==",
"requires": {
"@fullcalendar/common": "5.0.0-beta.4",
"tslib": "^1.9.3"
}
},
"@fullcalendar/react": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.0.0-beta.4.tgz",
"integrity": "sha512-gY8+GaUe43olA1rjXD/wCsOBTx4VmRquTK4iHS/ib5x1N1J8YZqTDygx4hGbJ8Aflj6RuVpU5wL7NHydYamohg==",
"requires": {
"@fullcalendar/common": "5.0.0-beta.4",
"tslib": "^1.9.3"
}
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -5294,9 +5330,9 @@
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
},
"eventemitter3": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.1.tgz",
"integrity": "sha512-MnI0l35oYL2C/c80rjJN7qu50MDx39yYE7y7oYck2YA3v+y7EaAenY8IU8AP4d1RWqE8VAKWFGSh3rfP87ll3g=="
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
"integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ=="
},
"events": {
"version": "3.1.0",
@ -5997,6 +6033,11 @@
"nan": "^2.12.1"
}
},
"fullcalendar-scheduler": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/fullcalendar-scheduler/-/fullcalendar-scheduler-5.0.0-beta.4.tgz",
"integrity": "sha512-pOx2k2mLPYyfqXJMpUw2ps7mzzIr6eGNwg1Q4SnTP9NuZN0Jyqm7wAU6XI/+bmf2CgO3KE0AdFd4XFkhC6TljQ=="
},
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@ -6465,9 +6506,9 @@
"integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q="
},
"http-proxy": {
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
"integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
"requires": {
"eventemitter3": "^4.0.0",
"follow-redirects": "^1.0.0",
@ -10227,6 +10268,11 @@
"uniq": "^1.0.1"
}
},
"preact": {
"version": "10.4.4",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.4.4.tgz",
"integrity": "sha512-EaTJrerceyAPatQ+vfnadoopsMBZAOY7ak9ogVdUi5xbpR8SoHgtLryXnW+4mQOwt21icqoVR1brkU2dq7pEBA=="
},
"prelude-ls": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",

4
package.json
View File

@ -3,10 +3,14 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fullcalendar/core": "^5.0.0-beta.4",
"@fullcalendar/daygrid": "^5.0.0-beta.4",
"@fullcalendar/react": "^5.0.0-beta.4",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"customize-cra": "^1.0.0-alpha.0",
"fullcalendar-scheduler": "^5.0.0-beta.4",
"less": "^3.11.1",
"less-loader": "^6.1.0",
"luxon": "^1.24.1",

13
src/components/Schedule/DaySelector.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
export default function DaySelector() {
return (
<FullCalendar
initialView='dayGridMonth'
plugins={[dayGridPlugin]}
/>
);
}

10
src/screens/Schedule.js
View File

@ -10,17 +10,17 @@ import {
} from 'rsuite';
import TimezonePicker from '../components/General/TimezonePicker';
import DaySelector from '../components/Schedule/DaySelector';
import { durations } from '../assets/data/durations';
export default function Schedule() {
const [durationIdx, setDurationIdx] = useState(0);
const handleIncrement = () => {
if (durationIdx <= durations.length-2) {
if (durationIdx <= durations.length - 2) {
setDurationIdx(durationIdx + 1);
}
};
const handleDecrement = () => {
if (durationIdx > 0) {
setDurationIdx(durationIdx - 1);
@ -47,11 +47,11 @@ export default function Schedule() {
<TimezonePicker />
</FormGroup>
<FormGroup style={{ width: 200 }}>
<InputGroup style={{background: 'white'}}>
<InputGroup style={{ background: 'white' }}>
<InputGroup.Button onClick={handleDecrement}>
<Icon icon='minus' />
</InputGroup.Button>
<div style={{ textAlign: 'center', paddingTop:5 }}>
<div style={{ textAlign: 'center', paddingTop: 5 }}>
{durations[durationIdx].label}
</div>
<InputGroup.Button onClick={handleIncrement}>
@ -59,6 +59,8 @@ export default function Schedule() {
</InputGroup.Button>
</InputGroup>
</FormGroup>
<DaySelector />
<FormGroup></FormGroup>
</Form>
</Container>
);