Improve presentation of events.

master
Tom Hacohen 7 years ago
parent d51dd7108b
commit bb61ef3935

@ -1,7 +1,36 @@
import * as React from 'react'; import * as React from 'react';
import * as moment from 'moment';
import * as ICAL from 'ical.js'; import * as ICAL from 'ical.js';
function formatDateRange(start: ICAL.Time, end: ICAL.Time) {
const mStart = moment(start.toJSDate());
const mEnd = moment(end.toJSDate());
let strStart;
let strEnd;
const allDayFormat = 'dddd, LL';
const fullFormat = 'LLLL';
// All day
if (start.isDate) {
if (mEnd.diff(mStart, 'days', true) === 1) {
return mStart.format(allDayFormat);
} else {
strStart = mStart.format(allDayFormat);
strEnd = mEnd.clone().subtract(1, 'day').format(allDayFormat);
}
} else if ((mStart.day === mEnd.day) && (mEnd.diff(mStart, 'days', true) < 1)) {
strStart = mStart.format(fullFormat);
strEnd = mEnd.format('LT');
} else {
strStart = mStart.format(fullFormat);
strEnd = mEnd.format(fullFormat);
}
return strStart + ' - ' + strEnd;
}
class Event extends React.Component { class Event extends React.Component {
props: { props: {
event?: ICAL.Event, event?: ICAL.Event,
@ -12,9 +41,15 @@ class Event extends React.Component {
throw Error('Event should be defined!'); throw Error('Event should be defined!');
} }
(window as any).me = this.props.event;
return ( return (
<div> <div>
<h3>{this.props.event.summary}</h3> <h2>{this.props.event.summary}</h2>
<div>{formatDateRange(this.props.event.startDate, this.props.event.endDate)}</div>
<div><u>{this.props.event.location}</u></div>
<div>{this.props.event.description}</div>
<div>Attendees: {this.props.event.attendees.map((x) => (x.getFirstValue())).join(', ')}</div>
</div> </div>
); );
} }

14
src/ical.js.d.ts vendored

@ -15,8 +15,11 @@ declare module 'ical.js' {
class Event { class Event {
uid: string; uid: string;
summary: string; summary: string;
startDate: any; startDate: Time;
endDate: any; endDate: Time;
description: string;
location: string;
attendees: Array<Property>;
constructor(component?: Component | null, constructor(component?: Component | null,
options?: {strictExceptions: boolean, exepctions: Array<Component|Event>}); options?: {strictExceptions: boolean, exepctions: Array<Component|Event>});
@ -26,7 +29,14 @@ declare module 'ical.js' {
name: string; name: string;
type: string; type: string;
getFirstValue(): string;
getValues(): Array<any>; getValues(): Array<any>;
toJSON(): any; toJSON(): any;
} }
class Time {
isDate: boolean;
toJSDate(): Date;
}
} }

Loading…
Cancel
Save