Add a calendar view.
Tom Hacohen
parent
154beee6d1
commit
635a41d41f
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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<EteSync.SyncEntry>,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.journal === undefined) {
|
||||
return (<div>Loading</div>);
|
||||
|
|
@ -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 (
|
||||
<li key={idx}>{entry.summary}</li>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{itemList}
|
||||
</ul>
|
||||
<div style={{width: '100%', height: 500}}>
|
||||
<BigCalendar
|
||||
events={entries}
|
||||
{...{culture: 'en-GB'}}
|
||||
date={this.state.currentDate}
|
||||
onNavigate={(currentDate: Date) => { this.setState({currentDate}); }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<Component|Event>});
|
||||
|
|
|
|||
73
yarn.lock
73
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue