diff --git a/src/components/Availability/IntervalSelector.js b/src/components/Availability/IntervalSelector.js
new file mode 100644
index 0000000..e169c7e
--- /dev/null
+++ b/src/components/Availability/IntervalSelector.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function IntervalSelector() {
+ return (
+
+ It's empty for now
+
+ )
+}
diff --git a/src/screens/App.js b/src/screens/App.js
index c3e4089..0c89750 100644
--- a/src/screens/App.js
+++ b/src/screens/App.js
@@ -4,11 +4,13 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Schedule from './Schedule/Schedule';
+import Availability from './Availability/Availability';
import Login from './Login';
import Register from './Register';
const titles = {
schedule: 'Schedule a meeting',
+ availability: 'Add you availability',
dashboard: 'Dashboard',
login: 'Login',
register: 'Registration',
@@ -19,7 +21,13 @@ export default function App() {
return (
-
+
+
+
+
+
+
+
diff --git a/src/screens/Availability/Availability.js b/src/screens/Availability/Availability.js
new file mode 100644
index 0000000..c115001
--- /dev/null
+++ b/src/screens/Availability/Availability.js
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import {
+ Panel,
+ Form,
+ FormControl,
+ ControlLabel,
+ Button,
+ ButtonGroup,
+ Message,
+ FormGroup,
+} from 'rsuite';
+import { DateTime } from 'luxon';
+
+import NavBar from '../../components/Navbar/NavBar';
+import TimezonePicker from '../../components/General/TimezonePicker';
+import IntervalSelector from '../../components/Availability/IntervalSelector';
+
+import './Availability.less';
+
+const eventsList = [
+ {
+ start: '2020-06-10',
+ display: 'background',
+ },
+ {
+ start: '2020-06-11',
+ display: 'background',
+ },
+ {
+ start: '2020-06-12',
+ display: 'background',
+ },
+ {
+ start: '2020-06-13',
+ display: 'background',
+ },
+];
+
+export default function Availability({ title }) {
+ // const [eventsList, setEventsList] = useState([]);
+ const [availability, setAvailability] = useState([]);
+
+ const handleClear = () => {
+ setAvailability([]);
+ };
+
+ const handleSelect = () => {
+ console.log('Congrats, you have selected!');
+ };
+
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
+
+// Convert events to Luxon Datetime objects
+const eventsToDates = (events) => {
+ let dates = [];
+ events.forEach((event) => {
+ dates.push(DateTime.fromFormat(event.start, 'yyyy-MM-dd'));
+ });
+ return dates;
+};
+
+const containerStyle = {
+ // TODO Move to a .less file
+ maxWidth: '1200px',
+ margin: '30px auto',
+ backgroundColor: 'rgba(255,255,255,0.6)',
+};
diff --git a/src/screens/Availability/Availability.less b/src/screens/Availability/Availability.less
new file mode 100644
index 0000000..2c97310
--- /dev/null
+++ b/src/screens/Availability/Availability.less
@@ -0,0 +1,28 @@
+.av-container {
+ display: grid;
+ grid-template-columns: 6fr 3fr;
+ grid-template-rows: 1fr;
+ grid-template-areas:
+ 'selector details';
+
+ column-gap: 2em;
+ row-gap: 2em;
+ grid-column-gap: 2em;
+ grid-row-gap: 2em;
+}
+
+.av-details {
+ grid-area: details;
+ margin: 1em 0 3em 0;
+}
+
+.interval-selector {
+ grid-area: selector;
+ margin: 1em 0 3em 0;
+}
+
+// Fix button alignment bug
+// TODO Check if still needed
+.rs-btn-block + .rs-btn-block {
+ margin-top: unset;
+}
\ No newline at end of file