Show a very basic event page when an event is clicked.

src/Calendar.tsx

@@ -7,27 +7,18 @@ import * as ICAL from 'ical.js';
 
 BigCalendar.momentLocalizer(moment);
 
-class EventWrapper {
+class EventWrapper extends ICAL.Event {
-  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();
+      return this.startDate.toJSDate();
   }
 
   get end() {
-      return this.event.endDate.toJSDate();
+      return this.endDate.toJSDate();
   }
 }
 
@@ -38,7 +29,7 @@ class Calendar extends React.Component {
 
   props: {
     entries: Array<ICAL.Component>,
-    onItemClick: (contact: ICAL.Component) => void,
+    onItemClick: (contact: ICAL.Event) => void,
   };
 
   constructor(props: any) {
@@ -48,7 +39,7 @@ class Calendar extends React.Component {
 
   render() {
     let entries = this.props.entries.map((value) => (
-      new EventWrapper(new ICAL.Event(value))
+      new EventWrapper(value)
     )).sort((a, b) => {
       if (a.summary < b.summary) {
         return -1;
@@ -63,6 +54,9 @@ class Calendar extends React.Component {
       <div style={{width: '100%', height: 500}}>
         <BigCalendar
           events={entries}
+          onSelectEvent={(event: any) => {
+            this.props.onItemClick(event);
+          }}
           {...{culture: 'en-GB'}}
           date={this.state.currentDate}
           onNavigate={(currentDate: Date) => { this.setState({currentDate}); }}

src/Event.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import * as ICAL from 'ical.js';
+
+class Event extends React.Component {
+  props: {
+    event?: ICAL.Event,
+  };
+
+  render() {
+    if (this.props.event === undefined) {
+      throw Error('Event should be defined!');
+    }
+
+    return (
+      <div>
+        <h3>{this.props.event.summary}</h3>
+      </div>
+    );
+  }
+}
+
+export default Event;

src/JournalCalendar.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import 'react-big-calendar/lib/css/react-big-calendar.css';
+import { Route, Switch, withRouter } from 'react-router';
+
+import { routeResolver } from './App';
 
 import Calendar from './Calendar';
+import Event from './Event';
 
 import * as ICAL from 'ical.js';
 
@@ -19,19 +22,39 @@ class JournalCalendar extends React.Component {
     this.eventClicked = this.eventClicked.bind(this);
   }
 
-  eventClicked(contact: ICAL.Component) {
+  eventClicked(event: ICAL.Event) {
-    // FIXME: do something
+    const uid = event.uid;
+
+    this.props.history.push(
+      routeResolver.getRoute('journals._id.items._id', { journalUid: this.props.journal.uid, itemUid: uid }));
   }
 
   render() {
     let items = this.props.entries;
 
     return (
-      <div style={{width: '100%', height: 500}}>
+      <Switch>
-        <Calendar entries={Array.from(items.values())} onItemClick={this.eventClicked} />
+        <Route
-      </div>
+          path={routeResolver.getRoute('journals._id')}
+          exact={true}
+          render={() => (
+              <Calendar entries={Array.from(items.values())} onItemClick={this.eventClicked} />
+            )
+          }
+        />
+        <Route
+          path={routeResolver.getRoute('journals._id.items._id')}
+          exact={true}
+          render={({match}) => {
+
+            return (
+              <Event event={new ICAL.Event(items.get(match.params.itemUid))} />
+            );
+          }}
+        />
+      </Switch>
     );
   }
 }
 
-export default JournalCalendar;
+export default withRouter(JournalCalendar);

src/Pim.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { Route, Switch } from 'react-router';
 
+import * as ICAL from 'ical.js';
+
 import * as EteSync from './api/EteSync';
 
 import Contact from './Contact';
+import Event from './Event';
 import PimMain from './PimMain';
 
 import { routeResolver } from './App';
@@ -84,6 +87,13 @@ class Pim extends React.Component {
             <Contact contact={addressBookItems.get(match.params.contactUid)} />
           )}
         />
+        <Route
+          path={routeResolver.getRoute('pim.events._id')}
+          exact={true}
+          render={({match}) => (
+            <Event event={new ICAL.Event(calendarItems.get(match.params.eventUid))} />
+          )}
+        />
       </Switch>
     );
   }

src/PimMain.tsx

@@ -21,8 +21,11 @@ class Pim extends React.Component {
     this.contactClicked = this.contactClicked.bind(this);
   }
 
-  eventClicked(contact: any) {
+  eventClicked(event: ICAL.Event) {
-    // FIXME
+    const uid = event.uid;
+
+    this.props.history.push(
+      routeResolver.getRoute('pim.events._id', { eventUid: uid }));
   }
 
   contactClicked(contact: ICAL.Component) {