Initial Calendar Commit

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/.idea

package.json

@@ -11,7 +11,9 @@
  "@testing-library/react": "^9.3.0",
  "bootstrap": "^4.3.1",
  "formik": "^1.5.8",
+ "moment": "^2.24.0",
  "react": "^16.10.2",
+ "react-big-calendar": "^0.22.1",
  "react-bootstrap": "^1.0.0-beta.14",
  "react-dom": "^16.10.2",
  "react-scripts": "3.2.0"

src/App.js

@@ -4,6 +4,7 @@ import { Router } from '@reach/router';
 import ContactUs from './components/contact-us';
 import Home from './components/home';
 import Header from './components/header';
+import TAOCalendar from "./components/calendar";
 import './App.css';
 import Button from '@material-ui/core/Button';
 
@@ -14,6 +15,7 @@ function App() {
  <Router>
  <Home path='/' />
  <ContactUs path='contact-us' />
+ <TAOCalendar path='calendar' />
  </Router>
  </Fragment>
  );

src/__snapshots__/App.test.js.snap

@@ -15,5 +15,10 @@ exports[`App renders without crashing 1`] = `
  >
  Contact Us
  </a>
+ <a
+ href="/calendar"
+ >
+ Calendar
+ </a>
 </header>
 `;

src/components/calendar/calendar.css

@@ -0,0 +1,40 @@
+.calendar-container {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ font-size: 14px;
+ height: calc(100vh - 100px);
+ margin: 20px auto;
+ min-height: calc(100vh - 100px);
+ min-height: -webkit-max-content;
+ min-height: -moz-max-content;
+ min-height: max-content;
+ padding: 0 40px;
+ width: 90%;
+}
+
+.rbc-event {
+ border-radius: 4px;
+ opacity: 0.8;
+ color: #FFFFFF;
+ border: 1px;
+ display: block;
+}
+
+.rbc-event.BendJS {
+ background-color: #FFFF00;
+ color: #000000;
+}
+
+.rbc-event.BendTech {
+ background-color: #00FF00;
+}
+
+.rbc-event.AWS {
+ background-color: #0000FF;
+}
+
+.rbc-event.WordPress {
+ background-color: #FF0000;
+}

src/components/calendar/fakeEvents.js

@@ -0,0 +1,212 @@
+const now = new Date()
+
+export default [
+ {
+ id: 0,
+ title: 'All Day Event very long title',
+ allDay: true,
+ start: new Date(2019, 9, 0),
+ end: new Date(2019, 9, 1),
+ resourceId: 1,
+ class: 'BendJS',
+ },
+ {
+ id: 1,
+ title: 'Long Event',
+ start: new Date(2019, 9, 7),
+ end: new Date(2019, 9, 10),
+ resourceId: 1,
+ class: 'BendJS',
+ },
+
+ {
+ id: 2,
+ title: 'DTS STARTS',
+ start: new Date(2019, 9, 13, 0, 0, 0),
+ end: new Date(2019, 9, 20, 0, 0, 0),
+ resourceId: 1,
+ class: 'BendJS',
+ },
+
+ {
+ id: 3,
+ title: 'DTS ENDS',
+ start: new Date(2019, 10, 6, 0, 0, 0),
+ end: new Date(2019, 10, 13, 0, 0, 0),
+ resourceId: 1,
+ class: 'BendJS',
+ },
+
+ {
+ id: 4,
+ title: 'Some Event',
+ start: new Date(2019, 9, 9, 0, 0, 0),
+ end: new Date(2019, 9, 10, 0, 0, 0),
+ resourceId: 2,
+ class: 'AWS',
+ },
+ {
+ id: 5,
+ title: 'Conference',
+ start: new Date(2019, 9, 11),
+ end: new Date(2019, 9, 13),
+ desc: 'Big conference for important people',
+ resourceId: 2,
+ class: 'AWS',
+ },
+ {
+ id: 6,
+ title: 'Meeting',
+ start: new Date(2019, 9, 12, 10, 30, 0, 0),
+ end: new Date(2019, 9, 12, 12, 30, 0, 0),
+ desc: 'Pre-meeting meeting, to prepare for the meeting',
+ resourceId: 2,
+ class: 'AWS',
+ },
+ {
+ id: 7,
+ title: 'Lunch',
+ start: new Date(2019, 9, 12, 12, 0, 0, 0),
+ end: new Date(2019, 9, 12, 13, 0, 0, 0),
+ desc: 'Power lunch',
+ resourceId: 2,
+ class: 'AWS',
+ },
+ {
+ id: 8,
+ title: 'Meeting',
+ start: new Date(2019, 9, 12, 14, 0, 0, 0),
+ end: new Date(2019, 9, 12, 15, 0, 0, 0),
+ resourceId: 3,
+ class: 'AWS',
+ },
+ {
+ id: 9,
+ title: 'Happy Hour',
+ start: new Date(2019, 9, 12, 17, 0, 0, 0),
+ end: new Date(2019, 9, 12, 17, 30, 0, 0),
+ desc: 'Most important meal of the day',
+ resourceId: 3,
+ class: 'AWS',
+ },
+ {
+ id: 10,
+ title: 'Dinner',
+ start: new Date(2019, 9, 12, 20, 0, 0, 0),
+ end: new Date(2019, 9, 12, 21, 0, 0, 0),
+ resourceId: 4,
+ class: 'AWS',
+ },
+ {
+ id: 11,
+ title: 'Birthday Party',
+ start: new Date(2019, 9, 13, 7, 0, 0),
+ end: new Date(2019, 9, 13, 10, 30, 0),
+ resourceId: 4,
+ class: 'AWS',
+ },
+ {
+ id: 12,
+ title: 'Late Night Event',
+ start: new Date(2019, 9, 17, 19, 30, 0),
+ end: new Date(2019, 9, 18, 2, 0, 0),
+ resourceId: 4,
+ class: 'AWS',
+ },
+ {
+ id: 12.5,
+ title: 'Late Same Night Event',
+ start: new Date(2019, 9, 17, 19, 30, 0),
+ end: new Date(2019, 9, 17, 23, 30, 0),
+ resourceId: 4,
+ class: 'AWS',
+ },
+ {
+ id: 13,
+ title: 'Multi-day Event',
+ start: new Date(2019, 9, 20, 19, 30, 0),
+ end: new Date(2019, 9, 22, 2, 0, 0),
+ resourceId: 2,
+ class: 'AWS',
+ },
+ {
+ id: 14,
+ title: 'Today',
+ start: new Date(new Date().setHours(new Date().getHours() - 3)),
+ end: new Date(new Date().setHours(new Date().getHours() + 3)),
+ resourceId: 4,
+ class: 'AWS',
+ },
+ {
+ id: 15,
+ title: 'Point in Time Event',
+ start: now,
+ end: now,
+ resourceId: 4,
+ class: 'WordPress',
+ },
+ {
+ id: 16,
+ title: 'Video Record',
+ start: new Date(2019, 9, 14, 15, 30, 0),
+ end: new Date(2019, 9, 14, 19, 0, 0),
+ resourceId: 4,
+ class: 'WordPress',
+ },
+ {
+ id: 17,
+ title: 'Dutch Song Producing',
+ start: new Date(2019, 9, 14, 16, 30, 0),
+ end: new Date(2019, 9, 14, 20, 0, 0),
+ resourceId: 4,
+ class: 'WordPress',
+ },
+ {
+ id: 18,
+ title: 'Itaewon Halloween Meeting',
+ start: new Date(2019, 9, 14, 16, 30, 0),
+ end: new Date(2019, 9, 14, 17, 30, 0),
+ resourceId: 4,
+ class: 'WordPress',
+ },
+ {
+ id: 19,
+ title: 'Online Coding Test',
+ start: new Date(2019, 9, 14, 17, 30, 0),
+ end: new Date(2019, 9, 14, 20, 30, 0),
+ resourceId: 3,
+ class: 'BendTech',
+ },
+ {
+ id: 20,
+ title: 'An overlapped Event',
+ start: new Date(2019, 9, 14, 17, 0, 0),
+ end: new Date(2019, 9, 14, 18, 30, 0),
+ resourceId: 2,
+ class: 'BendTech',
+ },
+ {
+ id: 21,
+ title: 'Phone Interview',
+ start: new Date(2019, 9, 14, 17, 0, 0),
+ end: new Date(2019, 9, 14, 18, 30, 0),
+ resourceId: 2,
+ class: 'BendTech',
+ },
+ {
+ id: 22,
+ title: 'Cooking Class',
+ start: new Date(2019, 9, 14, 17, 30, 0),
+ end: new Date(2019, 9, 14, 19, 0, 0),
+ resourceId: 2,
+ class: 'BendTech',
+ },
+ {
+ id: 23,
+ title: 'Go to the gym',
+ start: new Date(2019, 10, 14, 18, 30, 0),
+ end: new Date(2019, 10, 14, 20, 0, 0),
+ resourceId: 1,
+ class: 'BendTech',
+ },
+]

src/components/calendar/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Calendar, momentLocalizer } from 'react-big-calendar'
+import moment from 'moment';
+import fakeEvents from './fakeEvents';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import './calendar.css';
+
+const resourceMap = [
+ { resourceId: 1, resourceTitle: 'Board room' },
+ { resourceId: 2, resourceTitle: 'Training room' },
+ { resourceId: 3, resourceTitle: 'Meeting room 1' },
+ { resourceId: 4, resourceTitle: 'Meeting room 2' },
+]
+
+const localizer = momentLocalizer(moment)
+
+const selectEvent = (event) => {
+ console.log(`selected event: `, event);
+}
+
+const TAOCalendar = () => (
+ <div className="calendar-container">
+ <Calendar
+ localizer={localizer}
+ events={fakeEvents}
+ startAccessor="start"
+ endAccessor="end"
+ onSelectEvent={selectEvent}
+ resources={resourceMap}
+ resourceIdAccessor="resourceId"
+ resourceTitleAccessor="resourceTitle"
+ eventPropGetter={event => ({
+ className: event.class
+ })}
+ />
+ </div>
+)
+
+export default TAOCalendar;

src/components/header/header.css

@@ -0,0 +1,3 @@
+header a {
+ margin: 0 8px;
+}

src/components/header/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Link } from '@reach/router';
+import './header.css';
 
 function Home() {
  return (
  <header data-testid="app">
  <Link to='/'>Home</Link>
  <Link to='contact-us'>Contact Us</Link>
+ <Link to='calendar'>Calendar</Link>
  </header>
  );
 }