Calendar: Implement clicking on a time slot to add an event

You can now click (or select) a time slot to create an event that is
automatically populated with the selected times.

Fixes #8

src/Pim/PimMain.tsx

@@ -41,6 +41,7 @@ class PimMain extends React.PureComponent {
     this.eventClicked = this.eventClicked.bind(this);
     this.contactClicked = this.contactClicked.bind(this);
     this.floatingButtonClicked = this.floatingButtonClicked.bind(this);
+    this.newEvent = this.newEvent.bind(this);
   }
 
   eventClicked(event: ICAL.Event) {
@@ -57,15 +58,20 @@ class PimMain extends React.PureComponent {
       routeResolver.getRoute('pim.contacts._id', { itemUid: uid }));
   }
 
+  newEvent(start?: Date, end?: Date) {
+    this.props.history!.push(
+      routeResolver.getRoute('pim.events.new'),
+      {start, end}
+    );
+  }
+
   floatingButtonClicked() {
     if (this.state.tab === addressBookTitle) {
       this.props.history!.push(
         routeResolver.getRoute('pim.contacts.new')
       );
     } else if (this.state.tab === calendarTitle) {
-      this.props.history!.push(
-        routeResolver.getRoute('pim.events.new')
-      );
+      this.newEvent();
     }
   }
 
@@ -100,7 +106,11 @@ class PimMain extends React.PureComponent {
             label={calendarTitle}
           >
             <Container>
-              <PersistCalendar entries={this.props.events} onItemClick={this.eventClicked} />
+              <PersistCalendar
+                entries={this.props.events}
+                onItemClick={this.eventClicked}
+                onSlotClick={this.newEvent}
+              />
             </Container>
           </Tab>
         </Tabs>

src/components/Calendar.tsx

@@ -32,6 +32,7 @@ class Calendar extends React.PureComponent {
   props: {
     entries: Array<EventType>,
     onItemClick: (contact: EventType) => void,
+    onSlotClick?: (start: Date, end: Date) => void,
   };
 
   constructor(props: any) {
@@ -39,18 +40,27 @@ class Calendar extends React.PureComponent {
     this.state = {};
 
     this.onNavigate = this.onNavigate.bind(this);
+    this.slotClicked = this.slotClicked.bind(this);
   }
 
   onNavigate(currentDate: Date) {
     this.setState({currentDate});
   }
 
+  slotClicked(slotInfo: {start: Date, end: Date}) {
+    if (this.props.onSlotClick) {
+      this.props.onSlotClick(slotInfo.start, slotInfo.end);
+    }
+  }
+
   render() {
     return (
       <div style={{width: '100%', height: 500}}>
         <BigCalendar
           events={this.props.entries}
+          selectable={true}
           onSelectEvent={this.props.onItemClick as any}
+          onSelectSlot={this.slotClicked as any}
           formats={{agendaHeaderFormat: agendaHeaderFormat}}
           eventPropGetter={eventPropGetter}
           date={this.state.currentDate}

src/components/EventEdit.tsx

@@ -14,6 +14,9 @@ import DateTimePicker from '../widgets/DateTimePicker';
 
 import ConfirmationDialog from '../widgets/ConfirmationDialog';
 
+import { Location } from 'history';
+import { withRouter } from 'react-router';
+
 import * as uuid from 'uuid';
 import * as ICAL from 'ical.js';
 
@@ -43,6 +46,7 @@ class EventEdit extends React.PureComponent {
     onSave: (event: EventType, journalUid: string, originalEvent?: EventType) => void;
     onDelete: (event: EventType, journalUid: string) => void;
     onCancel: () => void;
+    location: Location;
   };
 
   constructor(props: any) {
@@ -57,6 +61,17 @@ class EventEdit extends React.PureComponent {
       journalUid: '',
       showDeleteDialog: false,
     };
+
+    const locState = this.props.location.state;
+    // FIXME: Hack to determine if all day. Should be passed as a proper state.
+    this.state.allDay = (locState.start &&
+      (locState.start.getHours() === 0) &&
+      (locState.start.getMinutes() === 0) &&
+      (locState.start.getHours() === locState.end.getHours()) &&
+      (locState.start.getMinutes() === locState.end.getMinutes()));
+    this.state.start = (locState.start) ? locState.start : undefined;
+    this.state.end = (locState.end) ? locState.end : undefined;
+
     if (this.props.item !== undefined) {
       const event = this.props.item;
 
@@ -306,4 +321,4 @@ class EventEdit extends React.PureComponent {
   }
 }
 
-export default EventEdit;
+export default withRouter(EventEdit);