From 635a41d41f152acbb1b2a63cbff833700858db73 Mon Sep 17 00:00:00 2001 From: Tom Hacohen Date: Mon, 4 Dec 2017 21:08:36 +0000 Subject: [PATCH] Add a calendar view. --- package.json | 3 ++ src/JournalViewCalendar.tsx | 57 +++++++++++++++++++++++------ src/ical.js.d.ts | 2 + yarn.lock | 73 +++++++++++++++++++++++++++++++++++-- 4 files changed, 121 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index b019e03..46e2d70 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "ical.js": "^1.2.2", "isomorphic-fetch": "^2.1.1", "material-ui": "^0.20.0", + "moment": "^2.19.3", "react": "^16.2.0", + "react-big-calendar": "^0.17.0", "react-dom": "^16.2.0", "react-router-dom": "^4.2.2", "react-scripts-ts": "2.8.0", @@ -25,6 +27,7 @@ "@types/material-ui": "^0.18.5", "@types/node": "^8.0.53", "@types/react": "^16.0.25", + "@types/react-big-calendar": "^0.15.0", "@types/react-dom": "^16.0.3", "@types/react-router": "^4.0.19", "@types/react-router-dom": "^4.2.3", diff --git a/src/JournalViewCalendar.tsx b/src/JournalViewCalendar.tsx index 5a97ff4..d31172b 100644 --- a/src/JournalViewCalendar.tsx +++ b/src/JournalViewCalendar.tsx @@ -1,19 +1,57 @@ import * as React from 'react'; +import BigCalendar from 'react-big-calendar'; +import 'react-big-calendar/lib/css/react-big-calendar.css'; +import * as moment from 'moment'; import * as ICAL from 'ical.js'; import * as EteSync from './api/EteSync'; +BigCalendar.momentLocalizer(moment); + +class EventWrapper { + event: ICAL.Event; + + constructor(event: ICAL.Event) { + this.event = event; + } + + get summary() { + return this.event.summary; + } + + get title() { + return this.summary; + } + + get start() { + return this.event.startDate.toJSDate(); + } + + get end() { + return this.event.endDate.toJSDate(); + } +} + export class JournalViewCalendar extends React.Component { static defaultProps = { prevUid: null, }; + state: { + currentDate?: Date; + }; + props: { journal: EteSync.Journal, entries: Array, }; + constructor(props: any) { + super(props); + this.state = {}; + } + render() { if (this.props.journal === undefined) { return (
Loading
); @@ -39,7 +77,7 @@ export class JournalViewCalendar extends React.Component { } let entries = Array.from(items.values()).map((value) => ( - new ICAL.Event(value) + new EventWrapper(new ICAL.Event(value)) )).sort((a, b) => { if (a.summary < b.summary) { return -1; @@ -50,17 +88,14 @@ export class JournalViewCalendar extends React.Component { } }); - let itemList = entries.map((entry, idx) => { - return ( -
  • {entry.summary}
    • - ); - }); - return ( -
    -
      - {itemList} -
    +
    + { this.setState({currentDate}); }} + />
    ); } diff --git a/src/ical.js.d.ts b/src/ical.js.d.ts index e0f2d9d..7c004ca 100644 --- a/src/ical.js.d.ts +++ b/src/ical.js.d.ts @@ -15,6 +15,8 @@ declare module 'ical.js' { class Event { uid: string; summary: string; + startDate: any; + endDate: any; constructor(component?: Component | null, options?: {strictExceptions: boolean, exepctions: Array}); diff --git a/yarn.lock b/yarn.lock index 315756b..0416016 100644 --- a/yarn.lock +++ b/yarn.lock @@ -35,6 +35,12 @@ dependencies: "@types/react" "*" +"@types/react-big-calendar@^0.15.0": + version "0.15.0" + resolved "https://registry.yarnpkg.com/@types/react-big-calendar/-/react-big-calendar-0.15.0.tgz#3359ec60840ef8f51f506e1bb45c1eab0d337f01" + dependencies: + "@types/react" "*" + "@types/react-dom@^16.0.3": version "16.0.3" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.3.tgz#8accad7eabdab4cca3e1a56f5ccb57de2da0ff64" @@ -879,6 +885,10 @@ clap@^1.0.9: dependencies: chalk "^1.1.3" +classnames@^2.1.3, classnames@^2.2.5: + version "2.2.5" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" + clean-css@4.1.x: version "4.1.9" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301" @@ -1276,6 +1286,10 @@ dashdash@^1.12.0: dependencies: assert-plus "^1.0.0" +date-arithmetic@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/date-arithmetic/-/date-arithmetic-3.1.0.tgz#1fcd03dbd504b9dbee2b9078c85a5f1c7d3cc2d3" + date-now@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b" @@ -1420,7 +1434,7 @@ dom-converter@~0.1: dependencies: utila "~0.3" -dom-helpers@^3.2.0: +"dom-helpers@^2.3.0 || ^3.0.0", dom-helpers@^3.2.0, dom-helpers@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a" @@ -2512,7 +2526,7 @@ interpret@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" -invariant@^2.2.1, invariant@^2.2.2: +invariant@^2.1.0, invariant@^2.2.1, invariant@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -3485,6 +3499,10 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd dependencies: minimist "0.0.8" +moment@^2.19.3: + version "2.19.3" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.3.tgz#bdb99d270d6d7fda78cc0fbace855e27fe7da69f" + ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" @@ -4295,7 +4313,13 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0: +prop-types-extra@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.0.1.tgz#a57bd4810e82d27a3ff4317ecc1b4ad005f79a82" + dependencies: + warning "^3.0.0" + +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -4413,6 +4437,21 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-big-calendar@^0.17.0: + version "0.17.0" + resolved "https://registry.yarnpkg.com/react-big-calendar/-/react-big-calendar-0.17.0.tgz#2c3cb0a660bf2ee22610453cbf123a886ffae6f1" + dependencies: + classnames "^2.1.3" + date-arithmetic "^3.0.0" + dom-helpers "^2.3.0 || ^3.0.0" + invariant "^2.1.0" + lodash "^4.17.4" + prop-types "^15.5.8" + react-overlays "^0.7.0" + react-prop-types "^0.4.0" + uncontrollable "^3.3.1 || ^4.0.0" + warning "^2.0.0" + react-dev-utils@^4.0.1: version "4.2.1" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.1.tgz#9f2763e7bafa1a1b9c52254d2a479deec280f111" @@ -4458,6 +4497,22 @@ react-event-listener@^0.5.1: prop-types "^15.6.0" warning "^3.0.0" +react-overlays@^0.7.0: + version "0.7.4" + resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.7.4.tgz#ef2ec652c3444ab8aa014262b18f662068e56d5c" + dependencies: + classnames "^2.2.5" + dom-helpers "^3.2.1" + prop-types "^15.5.10" + prop-types-extra "^1.0.1" + warning "^3.0.0" + +react-prop-types@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0" + dependencies: + warning "^3.0.0" + react-router-dom@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" @@ -5546,6 +5601,12 @@ uid-number@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81" +"uncontrollable@^3.3.1 || ^4.0.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-4.1.0.tgz#e0358291252e1865222d90939b19f2f49f81c1a9" + dependencies: + invariant "^2.1.0" + uniq@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" @@ -5696,6 +5757,12 @@ walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-2.1.0.tgz#21220d9c63afc77a8c92111e011af705ce0c6901" + dependencies: + loose-envify "^1.0.0" + warning@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"