Add calendar view

src/components/content/Calendar/index.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { StyledDay, StyledEvent, StyledWrapper } from './styled';
+
+interface IProps {
+    title: string;
+    events: Array<{
+        title: string;
+        day: number;
+        start: number;
+        end: number;
+    }>;
+}
+
+export default (props: IProps) => {
+    return (
+        <StyledWrapper>
+            <StyledDay style={{fontSize: '1.2em', gridRowStart: 1, gridColumnStart: 1, gridColumnEnd: 5}}>
+                {props.title}
+            </StyledDay>
+            <StyledDay style={{gridRowStart: 2, gridColumnStart: 1}}>
+                Tuesday Sept 5th
+            </StyledDay>
+            <StyledDay style={{gridRowStart: 2, gridColumnStart: 2}}>
+                Wednesday Sept 6th
+            </StyledDay>
+            <StyledDay style={{gridRowStart: 2, gridColumnStart: 3}}>
+                Thursday Sept 7th
+            </StyledDay>
+            <StyledDay style={{gridRowStart: 2, gridColumnStart: 4}}>
+                Friday Sept 8th
+            </StyledDay>
+            {props.events.map((element) => (
+                <StyledEvent key={element.title} style={{gridRowStart: element.start * 2 - 13, gridRowEnd: element.end * 2 - 13, gridColumnStart: element.day - 1}}>
+                    {element.title}
+                </StyledEvent>
+            ))}
+        </StyledWrapper>
+    )
+}

src/components/content/Calendar/styled.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const StyledWrapper = styled.div`
+    width: 100%;
+    height: 550px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 48px 48px repeat(28, 1fr);
+    grid-gap: 4px;
+    font-family: 'Fjalla One', sans-serif;
+`
+
+export const StyledDay = styled.div`
+    font-size: 1em;
+    color: white;
+    text-align: center;
+    text-transform: uppercase;
+`
+
+export const StyledEvent = styled.div`
+    display: flex;
+    font-size: 0.8em;
+    justify-content: center;
+    align-items: center;
+    background: white;
+    border-radius: 4px;
+    box-shadow: rgba(0,0,0,0.4) 0 0 8px;
+    color: #E51E25;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+        background: #FAFAFA;
+    }
+`

src/components/content/Nav/index.tsx

@@ -54,7 +54,7 @@ class Nav extends React.Component<IProps> {
         if(this.state.width < 760) {
             return (
                 <>
-                <StyledWrapper style={{background: this.props.full || this.props.location.pathname !== '/' ? '#2F2F6F' : 'transparent'}}>
+                <StyledWrapper style={{background: this.props.full ? '#2F2F6F' : 'transparent'}}>
                     <StyledOpen className='fas fa-bars' onClick={this.handleOpen}/>
                 </StyledWrapper>
                 {this.state.open ?
@@ -82,7 +82,7 @@ class Nav extends React.Component<IProps> {
             )
         } else {
             return (
-                <StyledWrapper style={{background: this.props.full || this.props.location.pathname !== '/' ? '#2F2F6F' : 'transparent'}}>
+                <StyledWrapper style={{background: this.props.full ? '#2F2F6F' : 'transparent'}}>
                     <StyledNavItem style={{lineHeight: '48px', verticalAlign: 'middle'}} to='#'>
                         {this.props.left}
                     </StyledNavItem>

src/pages/Schedule.tsx

@@ -2,20 +2,95 @@ import * as React from 'react';
 
 import About from '../components/content/About';
 import Border from '../components/content/Border';
+import Calendar from '../components/content/Calendar';
 import Contact from '../components/form/Contact';
 
-import border1 from '../assets/border1.svg';
 import border3 from '../assets/border3.svg';
 
-import ScheduleContent from '../markdown/schedule.md';
-
 export default () => {
   return (
     <div className="fadein">
-    <About color='white' border={border1}>
-      <ScheduleContent />
+    <About color='blue'>
+      <h1>Schedule</h1>
+      <Calendar 
+        title='Week 1'
+        events={[
+          {
+            day: 2,
+            end: 16,
+            start: 8,
+            title: 'Imagine Day',
+          },
+          {
+            day: 2,
+            end: 19,
+            start: 16,
+            title: 'Imagine Day BBQ',
+          },
+          {
+            day: 3,
+            end: 8,
+            start: 10,
+            title: 'AOESPD Breakfast',
+          },
+          {
+            day: 3,
+            end: 12,
+            start: 14,
+            title: 'Chariot Racing',
+          },
+          {
+            day: 3,
+            end: 21,
+            start: 17.5,
+            title: 'Games Night with Profs',
+          },
+          {
+            day: 4,
+            end: 8,
+            start: 10,
+            title: 'ESW Breakfast',
+          },
+          {
+            day: 4,
+            end: 12.5,
+            start: 11,
+            title: 'True Engineer',
+          },
+          {
+            day: 4,
+            end: 17,
+            start: 16,
+            title: 'E-Retreat 101',
+          },
+          {
+            day: 4,
+            end: 19,
+            start: 17,
+            title: 'hEUStory & Godiva Band BBQ',
+          },
+          {
+            day: 5,
+            end: 10,
+            start: 8,
+            title: 'EWB Breakfast',
+          },
+          {
+            day: 5,
+            end: 11,
+            start: 13,
+            title: 'Ultimate Frisbee & BBQ',
+          },
+          {
+            day: 5,
+            end: 19,
+            start: 21,
+            title: 'Back to School Party',
+          }
+        ]}
+      />
     </About>
-    <Border border={border3} color='white' />
+    <Border border={border3} />
     <About color='red' border={border3}>
       <Contact />
     </About>