From b8f1c426d192a72f2624b38ace958ee741e8211a Mon Sep 17 00:00:00 2001
From: JasonC104 <jasonchan104@gmail.com>
Date: Tue, 31 Dec 2019 17:29:41 -0500
Subject: [PATCH] Finished initial version of the Schedule page

---
 package.json                                  |   1 +
 public/index.html                             |   1 +
 src/pages/Dashboard/Schedule.jsx              |  13 --
 src/pages/Dashboard/Schedule/Column.jsx       | 144 ++++++++++++++++++
 src/pages/Dashboard/Schedule/Event.jsx        |  68 +++++++++
 src/pages/Dashboard/Schedule/EventModal.jsx   |  62 ++++++++
 src/pages/Dashboard/Schedule/TimeColumn.jsx   |  34 +++++
 src/pages/Dashboard/Schedule/Timeline.jsx     |  20 +++
 .../Dashboard/Schedule/events/colours.js      |  17 +++
 src/pages/Dashboard/Schedule/events/friday.js |  46 ++++++
 src/pages/Dashboard/Schedule/events/index.js  |  18 +++
 .../Dashboard/Schedule/events/saturday.js     | 144 ++++++++++++++++++
 src/pages/Dashboard/Schedule/events/sunday.js |  60 ++++++++
 src/pages/Dashboard/Schedule/index.jsx        |  90 +++++++++++
 14 files changed, 705 insertions(+), 13 deletions(-)
 delete mode 100644 src/pages/Dashboard/Schedule.jsx
 create mode 100644 src/pages/Dashboard/Schedule/Column.jsx
 create mode 100644 src/pages/Dashboard/Schedule/Event.jsx
 create mode 100644 src/pages/Dashboard/Schedule/EventModal.jsx
 create mode 100644 src/pages/Dashboard/Schedule/TimeColumn.jsx
 create mode 100644 src/pages/Dashboard/Schedule/Timeline.jsx
 create mode 100644 src/pages/Dashboard/Schedule/events/colours.js
 create mode 100644 src/pages/Dashboard/Schedule/events/friday.js
 create mode 100644 src/pages/Dashboard/Schedule/events/index.js
 create mode 100644 src/pages/Dashboard/Schedule/events/saturday.js
 create mode 100644 src/pages/Dashboard/Schedule/events/sunday.js
 create mode 100644 src/pages/Dashboard/Schedule/index.jsx
diff --git a/package.json b/package.json
index 83a9864..389c910 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@cheapreats/react-ui": "^2.2.10",
+    "moment": "^2.24.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.0.1",
diff --git a/public/index.html b/public/index.html
index a146b6f..7b33288 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/pages/Dashboard/Schedule.jsx b/src/pages/Dashboard/Schedule.jsx
deleted file mode 100644
index 9105416..0000000
--- a/src/pages/Dashboard/Schedule.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { CalendarAlt } from 'styled-icons/fa-regular/CalendarAlt';
-import { DashboardPage } from '../../components';
-
-export const Schedule = () => {
-    return <DashboardPage heading="Schedule"></DashboardPage>;
-};
-
-Schedule.routeProps = {
-    path: '/:id/schedule',
-    Icon: CalendarAlt,
-    exact: true,
-};
diff --git a/src/pages/Dashboard/Schedule/Column.jsx b/src/pages/Dashboard/Schedule/Column.jsx
new file mode 100644
index 0000000..29b8757
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/Column.jsx
@@ -0,0 +1,144 @@
+import React, { useMemo } from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import { SmallText } from '@cheapreats/react-ui';
+import { Event } from './Event';
+
+export const Column = ({
+    date,
+    events,
+    showModal,
+    headerHeight,
+    rowHeight,
+}) => {
+    const boxes = useMemo(
+        () => [...Array(24)].map((v, i) => <Box key={i} height={rowHeight} />),
+        [rowHeight],
+    );
+
+    const eventComponents = useMemo(
+        () =>
+            calcEventSize(events).map((event, i) => (
+                <Event
+                    {...event}
+                    key={i}
+                    rowHeight={rowHeight}
+                    onClick={() => showModal(event)}
+                />
+            )),
+        [events, showModal, rowHeight],
+    );
+
+    return (
+        <Layout>
+            <Header height={headerHeight}>
+                <HeaderText bold>
+                    {moment.utc(date, 'DD/MM/YY').format('LL')}
+                </HeaderText>
+            </Header>
+            <EventLayout>
+                {eventComponents}
+                {boxes}
+            </EventLayout>
+        </Layout>
+    );
+};
+
+/**
+ * This function adds a startTime, endTime, column, and overlaps property to each event.
+ * Overlaps is the largest number of events that it overlaps with at a point in time
+ * Column is the column the event will be in when it is displayed on the schedule.
+ */
+function calcEventSize(events) {
+    events = events
+        .map(event => {
+            return {
+                ...event,
+                startTime: moment.utc(event.time[0], 'H:mm'),
+                endTime: moment.utc(
+                    event.time[1] === '24:00' ? '23:59' : event.time[1],
+                    'H:mm',
+                ),
+                // moment.js treats '24:00' as '0:00' so instead we temporarily change it to '23:59'
+            };
+        })
+        .sort((a, b) => (a.startTime < b.startTime ? -1 : 1));
+
+    /**
+     * We create groups on all events that overlap.
+     * endTimes holds a column's latest event end time
+     * overlapStartIndex is the index of the first event in the group
+     * Once we iterate on an event that does not overlap with the group, we can set
+     * the overlaps property on all events in the group so that we know the number
+     * of columns in the group. This helps with figuring out the width of the event block
+     */
+    let endTimes = [];
+    let overlapStartIndex = 0;
+    for (let i = 0; i < events.length; i++) {
+        events[i].column = 0;
+        events[i].overlaps = 1;
+        const s =
+            events[i].startTime.hour() + events[i].startTime.minute() / 60;
+        const e = events[i].endTime.hour() + events[i].endTime.minute() / 60;
+
+        // if there is an overlap, then place the overlap in a group
+        if (s < Math.max(...endTimes)) {
+            let grouped = false;
+            for (let j = 0; j < endTimes.length; j++) {
+                if (!grouped && endTimes[j] <= s) {
+                    grouped = true;
+                    endTimes[j] = e;
+                    events[i].column = j;
+                    break;
+                }
+            }
+            if (!grouped) {
+                endTimes.push(e);
+                events[i].column = endTimes.length - 1;
+            }
+        } else {
+            for (let j = overlapStartIndex; j < i; j++) {
+                events[j].overlaps = endTimes.length;
+            }
+            // reset groupings
+            endTimes = [e];
+            overlapStartIndex = i;
+        }
+    }
+    for (let j = overlapStartIndex; j < events.length; j++) {
+        events[j].overlaps = endTimes.length;
+    }
+    return events;
+}
+
+const Layout = styled.div`
+    flex-grow: 2;
+    min-width: 200px;
+    border-left: 2px solid lightgrey;
+    &:first-child {
+        border-left: none;
+    }
+`;
+
+const EventLayout = styled.div`
+    position: relative;
+`;
+
+const Header = styled.div`
+    border-bottom: 2px solid lightgrey;
+    display: flex;
+    align-items: center;
+    ${({ height }) => `height: ${height}px;`}
+`;
+
+const HeaderText = styled(SmallText)`
+    padding-left: 10px;
+`;
+
+const Box = styled.div`
+    border-bottom: 2px solid lightgrey;
+    &:last-child {
+        border-bottom: none;
+    }
+    ${({ height }) => `height: ${height - 2}px;`}
+`;
diff --git a/src/pages/Dashboard/Schedule/Event.jsx b/src/pages/Dashboard/Schedule/Event.jsx
new file mode 100644
index 0000000..dd6d883
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/Event.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Card, Paragraph } from '@cheapreats/react-ui';
+
+export const Event = ({
+    title,
+    startTime,
+    endTime,
+    background,
+    primary,
+    overlaps,
+    column,
+    rowHeight,
+    onClick,
+}) => {
+    const top = (startTime.hour() + startTime.minute() / 60) * rowHeight;
+    const height =
+        (endTime.hour() -
+            startTime.hour() +
+            (endTime.minute() - startTime.minute()) / 60) *
+        rowHeight;
+    const s = startTime.format('h:mma');
+    const e = endTime.format('h:mma');
+    return (
+        <Container
+            onClick={onClick}
+            key={title}
+            overlaps={overlaps}
+            column={column}
+            top={top}
+            height={height}
+            background={background}
+        >
+            <TextContainer>
+                <StyledParagraph align="left" color={primary}>
+                    {title}
+                </StyledParagraph>
+                <StyledParagraph align="right" color={primary}>
+                    {s} - {e === '11:59pm' ? '12:00pm' : e}
+                </StyledParagraph>
+            </TextContainer>
+        </Container>
+    );
+};
+
+const Container = styled(Card)`
+    cursor: pointer;
+    position: absolute;
+    padding: 5px;
+    margin-left: auto;
+    margin-right: auto;
+    ${({ top, height, background, overlaps, column }) => `
+        top: ${top}px;
+        height: ${height - 12}px;
+        background-color: ${background};
+        width: calc(${100 / overlaps}% - 12px);
+        left: calc(${(100 / overlaps) * column}% + 1px);
+    `}
+`;
+
+const TextContainer = styled.div`
+    padding: 0 5px;
+`;
+
+const StyledParagraph = styled(Paragraph)`
+    font-size: 0.75rem;
+    ${({ color }) => `color: ${color};`}
+`;
diff --git a/src/pages/Dashboard/Schedule/EventModal.jsx b/src/pages/Dashboard/Schedule/EventModal.jsx
new file mode 100644
index 0000000..0f6fe68
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/EventModal.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Heading, Modal, Paragraph, SmallText } from '@cheapreats/react-ui';
+import { LabelLayout } from '@cheapreats/react-ui/dist/__Layouts';
+
+export const EventModal = ({ state, event }) => {
+    return (
+        event && (
+            <StyledModal
+                state={state}
+                background={event.background}
+                primary={event.primary}
+                secondary={event.secondary}
+            >
+                <HeadingContainer>
+                    <Heading bold type="h5" color={event.primary}>
+                        {event.title}
+                    </Heading>
+                    <SmallText color={event.primary}>
+                        {event.startTime.format('h:mma')} -{' '}
+                        {event.endTime.format('h:mma')}
+                    </SmallText>
+                </HeadingContainer>
+                <LabelLayout label="Location">
+                    <StyledText color={event.primary}>
+                        {event.location}
+                    </StyledText>
+                </LabelLayout>
+                <LabelLayout label="Organizer">
+                    <StyledText color={event.primary}>
+                        {event.organizer}
+                    </StyledText>
+                </LabelLayout>
+                <LabelLayout label="Description">
+                    <StyledText color={event.primary}>
+                        {event.description}
+                    </StyledText>
+                </LabelLayout>
+            </StyledModal>
+        )
+    );
+};
+
+const StyledModal = styled(Modal)`
+    padding: 10px;
+    ${({ background, primary, secondary }) => `
+        background-color: ${background};
+        color: ${primary};
+        border: 2px solid ${primary}
+    `}
+`;
+
+const HeadingContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+`;
+
+const StyledText = styled(Paragraph)`
+    opacity: 0.9;
+`;
diff --git a/src/pages/Dashboard/Schedule/TimeColumn.jsx b/src/pages/Dashboard/Schedule/TimeColumn.jsx
new file mode 100644
index 0000000..778f0fe
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/TimeColumn.jsx
@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import { SmallText } from '@cheapreats/react-ui';
+
+export const TimeColumn = ({ headerHeight, rowHeight }) => {
+    const boxes = useMemo(
+        () =>
+            [...Array(24)].map((v, i) => (
+                <Box key={i} height={rowHeight}>
+                    <SmallText bold>
+                        {moment.utc(i, 'H').format('h:mma')}
+                    </SmallText>
+                </Box>
+            )),
+        [rowHeight],
+    );
+
+    return (
+        <Layout>
+            <Box height={headerHeight - 10} />
+            {boxes}
+        </Layout>
+    );
+};
+
+const Layout = styled.div`
+    border-right: 2px solid lightgrey;
+    padding: 0 5px;
+`;
+
+const Box = styled.div`
+    ${({ height }) => `height: ${height}px;`}
+`;
diff --git a/src/pages/Dashboard/Schedule/Timeline.jsx b/src/pages/Dashboard/Schedule/Timeline.jsx
new file mode 100644
index 0000000..37b46e9
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/Timeline.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+
+export const Timeline = ({ headerHeight, rowHeight }) => {
+    const now = moment();
+    const top = headerHeight + (now.hour() + now.minute() / 60) * rowHeight;
+    return <StyledHr top={top} />;
+};
+
+const StyledHr = styled.hr`
+    border-width: 1px 0px;
+    border-style: solid;
+    border-color: #00e2ef;
+    background-color: #00e2ef;
+    height: 2px;
+    width: 100%;
+    position: absolute;
+    ${({ top }) => `top: ${top - 6}px;`}
+`;
diff --git a/src/pages/Dashboard/Schedule/events/colours.js b/src/pages/Dashboard/Schedule/events/colours.js
new file mode 100644
index 0000000..7a4611d
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/events/colours.js
@@ -0,0 +1,17 @@
+export const HTV_OFFICIAL = {
+    background: '#7bbe48',
+    primary: 'white',
+    secondary: 'white',
+};
+
+export const WORKSHOPS = {
+    background: '#c29356',
+    primary: 'white',
+    secondary: 'white',
+};
+
+export const SIDE = {
+    background: '#236fc2',
+    primary: 'white',
+    secondary: 'white',
+};
diff --git a/src/pages/Dashboard/Schedule/events/friday.js b/src/pages/Dashboard/Schedule/events/friday.js
new file mode 100644
index 0000000..9044782
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/events/friday.js
@@ -0,0 +1,46 @@
+import { HTV_OFFICIAL, SIDE, WORKSHOPS } from './colours';
+
+export default [
+    {
+        title: 'Waterloo Bus Leaves',
+        location: 'Waterloo',
+        description: 'Waterloo bus leaves for HTV III',
+        organizer: ['Jun Zheng'],
+        time: ['16:00', '16:30'], // from - to
+        ...SIDE,
+    },
+    {
+        title: 'Hacker Registration',
+        location: 'AC223',
+        description:
+            'Registration, please make sure you have your acceptance ticket, and a piece of ID (student ID or government ID).',
+        organizer: ['Jun Zheng'],
+        time: ['18:00', '21:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'Opening Ceremony',
+        location: 'AC223',
+        description: 'HTV III opening ceremony.',
+        organizer: ['Jun Zheng'],
+        time: ['21:00', '23:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'Team Formation',
+        location: 'AC223',
+        description:
+            "Stay in AC223 if you don't have a team yet, or want to find some new members for your team!",
+        organizer: ['Jun Zheng'],
+        time: ['23:00', '23:30'], // from - to
+        ...SIDE,
+    },
+    {
+        title: 'Google Cloud Platform Workshop',
+        location: 'HW214',
+        description: 'Google Cloud Platform Workshop',
+        organizer: ['Jun Zheng'],
+        time: ['23:00', '24:00'], // from - to
+        ...WORKSHOPS,
+    },
+];
diff --git a/src/pages/Dashboard/Schedule/events/index.js b/src/pages/Dashboard/Schedule/events/index.js
new file mode 100644
index 0000000..684432b
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/events/index.js
@@ -0,0 +1,18 @@
+import fridayEvents from './friday';
+import saturdayEvents from './saturday';
+import sundayEvents from './sunday';
+
+export default [
+    {
+        date: '14/02/20',
+        events: fridayEvents,
+    },
+    {
+        date: '15/02/20',
+        events: saturdayEvents,
+    },
+    {
+        date: '16/02/20',
+        events: sundayEvents,
+    },
+];
diff --git a/src/pages/Dashboard/Schedule/events/saturday.js b/src/pages/Dashboard/Schedule/events/saturday.js
new file mode 100644
index 0000000..1878b9b
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/events/saturday.js
@@ -0,0 +1,144 @@
+import { HTV_OFFICIAL, SIDE, WORKSHOPS } from './colours';
+
+export default [
+    {
+        title: 'React Beginner Workshop',
+        location: 'HW214',
+        description:
+            'Want to take your web game to the next level? Join us in this workshop where you would learn the basics of React and make your own login page.',
+        organizer: ['Fredric Pun'],
+        time: ['00:00', '1:00'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'Midnight Snack',
+        location: 'HW308',
+        description: 'Midnight snack.',
+        organizer: ['Jun Zheng'],
+        time: ['00:00', '1:00'], // from - to
+        ...SIDE,
+    },
+    {
+        title: 'Web Application Workshop',
+        location: 'HW214',
+        description: 'Web Application Workshop',
+        organizer: ['Omar Chehab'],
+        time: ['01:00', '02:00'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'Breakfast',
+        location: 'HW308',
+        description: 'Breakfast!',
+        organizer: ['Jun Zheng'],
+        time: ['09:00', '11:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'The Bottlenecks of Blockchain Technology',
+        location: 'HW214',
+        description: 'The Bottlenecks of Blockchain Technology',
+        organizer: ['Jun Zheng'],
+        time: ['09:00', '10:00'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'The Hub Workshop',
+        location: 'HW214',
+        description: 'The Hub Workshop',
+        organizer: ['Jun Zheng'],
+        time: ['10:00', '11:30'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'FDM Group Workshop',
+        location: 'HW214',
+        description: 'FDM Group Workshop',
+        organizer: ['Jun Zheng'],
+        time: ['11:30', '12:30'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'Lunch',
+        location: 'HW308',
+        description: 'Lunch!',
+        organizer: ['Jun Zheng'],
+        time: ['13:00', '15:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'GraphQL Workshop',
+        location: 'HW214',
+        description:
+            'What is all this GraphQL fuss about? During this workshop, you will learn the basics of GraphQL, and how to build a simple GraphQL API using Node.js!',
+        organizer: ['Jun Zheng'],
+        time: ['13:00', '14:00'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'You.i TV Workshop',
+        location: 'HW214',
+        description: 'You.i TV Workshop',
+        organizer: ['Jun Zheng'],
+        time: ['14:00', '15:00'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'Snack',
+        location: "Nasir's Hot Dog Stand",
+        description:
+            'Download CheaprEats app on your phone to redeem your free hot dog!',
+        organizer: ['Jun Zheng'],
+        time: ['16:00', '22:00'], // from - to
+        ...SIDE,
+    },
+    {
+        title: 'Women In Code Summit',
+        location: 'HW214',
+        description: 'Women In Code Summit',
+        organizer: ['Jun Zheng'],
+        time: ['15:00', '17:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'Rogers Workshop',
+        location: 'HW214',
+        description: 'Rogers Workshop',
+        organizer: ['Jun Zheng'],
+        time: ['17:00', '18:30'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'MLH Cup Stacking',
+        location: 'HW308',
+        description: 'MLH Cup Stacking',
+        organizer: ['Jun Zheng'],
+        time: ['19:00', '20:00'], // from - to
+        ...SIDE,
+    },
+    {
+        title: 'Advanced React Workshop',
+        location: 'HW214',
+        description:
+            'Looking for a challenge? Join us in this workshop where we would explore some of the new features up till React 16.8 and create a modal library.',
+        organizer: ['Fredric Pun'],
+        time: ['20:00', '21:00'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'Nerf Gun Fight',
+        location: 'TBA',
+        description: 'Nerf Gun Fight!',
+        organizer: ['Jun Zheng'],
+        time: ['21:00', '22:00'], // from - to
+        ...SIDE,
+    },
+    {
+        title: 'Dinner',
+        location: 'HW214',
+        description: 'Dinner!',
+        organizer: ['Jun Zheng'],
+        time: ['20:30', '22:30'], // from - to
+        ...HTV_OFFICIAL,
+    },
+];
diff --git a/src/pages/Dashboard/Schedule/events/sunday.js b/src/pages/Dashboard/Schedule/events/sunday.js
new file mode 100644
index 0000000..a48d2e0
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/events/sunday.js
@@ -0,0 +1,60 @@
+import { HTV_OFFICIAL, WORKSHOPS } from './colours';
+
+export default [
+    {
+        title: 'System Administration Workshop',
+        location: 'HW214',
+        description: 'System Administration Workshop',
+        organizer: ['Omar Chehab'],
+        time: ['01:00', '2:00'], // from - to
+        ...WORKSHOPS,
+    },
+    {
+        title: 'Breakfast',
+        location: 'HW308',
+        description: 'Breakfast!',
+        organizer: ['Jun Zheng'],
+        time: ['09:00', '11:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'Project Submission',
+        location: 'Devpost',
+        description: 'Project Submission',
+        organizer: ['Jun Zheng'],
+        time: ['10:00', '11:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'Lunch',
+        location: 'HW308',
+        description: 'Lunch!',
+        organizer: ['Jun Zheng'],
+        time: ['12:00', '14:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'Round 1 Judging',
+        location: 'Meeting Place',
+        description: 'Round 1 Judging',
+        organizer: ['Jun Zheng'],
+        time: ['12:00', '13:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'Round 2 Judging',
+        location: 'Meeting Place',
+        description: 'Round 2 Judging',
+        organizer: ['Jun Zheng'],
+        time: ['13:30', '14:30'], // from - to
+        ...HTV_OFFICIAL,
+    },
+    {
+        title: 'Closing Ceremony',
+        location: 'AC223',
+        description: 'Closing Ceremony',
+        organizer: ['Jun Zheng'],
+        time: ['15:00', '17:00'], // from - to
+        ...HTV_OFFICIAL,
+    },
+];
diff --git a/src/pages/Dashboard/Schedule/index.jsx b/src/pages/Dashboard/Schedule/index.jsx
new file mode 100644
index 0000000..9c1bfe4
--- /dev/null
+++ b/src/pages/Dashboard/Schedule/index.jsx
@@ -0,0 +1,90 @@
+import React, { useCallback, useMemo, useReducer } from 'react';
+import styled from 'styled-components';
+import { CalendarAlt } from 'styled-icons/fa-regular/CalendarAlt';
+import { Mixins } from '@cheapreats/react-ui';
+import { DashboardPage } from '../../../components';
+import { Column } from './Column';
+import { EventModal } from './EventModal';
+import { TimeColumn } from './TimeColumn';
+import { Timeline } from './Timeline';
+import fullSchedule from './events';
+
+const HEADER_HEIGHT = 50;
+const ROW_HEIGHT = 100;
+
+function reducer(state, action) {
+    switch (action.type) {
+        case 'show':
+            return { ...state, show: true, event: action.event };
+        case 'hide':
+            return { ...state, show: false };
+        default:
+            return { ...state };
+    }
+}
+
+export const Schedule = () => {
+    const [modalState, dispatch] = useReducer(reducer, {
+        show: false,
+        event: null,
+    });
+    const showModal = useCallback(event => dispatch({ type: 'show', event }), [
+        dispatch,
+    ]);
+    const hideModal = useCallback(() => dispatch({ type: 'hide' }), [dispatch]);
+    const sched = useMemo(
+        () =>
+            fullSchedule.map(day => (
+                <Column
+                    key={day.date}
+                    date={day.date}
+                    events={day.events}
+                    showModal={showModal}
+                    headerHeight={HEADER_HEIGHT}
+                    rowHeight={ROW_HEIGHT}
+                />
+            )),
+        [showModal],
+    );
+
+    return (
+        <DashboardPage heading="Schedule">
+            <Layout>
+                <TimeColumn
+                    headerHeight={HEADER_HEIGHT}
+                    rowHeight={ROW_HEIGHT}
+                />
+                <ColumnContainer>
+                    {sched}
+                    <Timeline
+                        headerHeight={HEADER_HEIGHT}
+                        rowHeight={ROW_HEIGHT}
+                    />
+                </ColumnContainer>
+            </Layout>
+            <EventModal
+                state={[modalState.show, hideModal]}
+                event={modalState.event}
+            />
+        </DashboardPage>
+    );
+};
+
+Schedule.routeProps = {
+    path: '/:id/schedule',
+    Icon: CalendarAlt,
+    exact: true,
+};
+
+const Layout = styled.div`
+    display: flex;
+    border: 2px solid lightgrey;
+`;
+
+const ColumnContainer = styled.div`
+    position: relative;
+    display: flex;
+    width: 100%;
+    overflow: auto;
+    ${Mixins.scroll}
+`;
