revamp the calendar view

Author: hawkrives

views/calendar/calendar.js

@@ -89,8 +89,8 @@ export default class CalendarView extends React.Component {
 
     if (data) {
       data.forEach(event => {
-        event.startTime = moment(event.start.dateTime)
-        event.endTime = moment(event.end.dateTime)
+        event.startTime = moment(event.start.date || event.start.dateTime)
+        event.endTime = moment(event.end.date || event.end.dateTime)
       })
       let grouped = groupBy(data, event => event.startTime.format('ddd  MMM Do'))
       this.setState({events: this.state.events.cloneWithRowsAndSections(grouped)})
@@ -177,7 +177,6 @@ let styles = StyleSheet.create({
     backgroundColor: '#ffffff',
   },
   row: {
-    minHeight: 88,
     // marginLeft: 10,
     // paddingRight: 10,
   },

views/calendar/event.js

@@ -5,43 +5,87 @@ import {
   Text,
 } from 'react-native'
 
+import moment from 'moment-timezone'
 import * as c from '../components/colors'
 import {getText, parseHtml} from '../../lib/html'
 
 let styles = StyleSheet.create({
   container: {
-    paddingTop: 10,
-    paddingBottom: 6,
+    paddingVertical: 2,
+    // paddingLeft: 10,
+    flexDirection: 'row',
+  },
+  rowIllusion: {
+    paddingVertical: 4,
+  },
+  times: {
+    width: 70,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingRight: 12,
+    paddingLeft: 4,
+  },
+  timeText: {
+    textAlign: 'right',
+    fontSize: 10,
+  },
+  startTime: {
+    // marginTop: 3,
+    color: 'black',
+  },
+  endTime: {
+    color: c.iosText,
+  },
+  texts: {
     paddingLeft: 10,
+    flex: 1,
+    borderLeftWidth: 2,
+    borderLeftColor: c.iosGray,
   },
-  itemTitle: {
+  title: {
     color: c.black,
-    paddingBottom: 3,
-    fontSize: 16,
     fontWeight: '500',
+    paddingBottom: 3,
+    fontSize: 14,
   },
-  itemPreview: {
+  location: {
     color: c.iosText,
-    fontSize: 13,
+    fontSize: 10,
   },
 })
 
 // PROPS: eventTitle, location, startTime, endTime
 export default function EventView(props: {eventTitle: string, location: string, startTime?: Object, endTime?: Object, style?: any}) {
   let title = getText(parseHtml(props.eventTitle))
 
-  let showTimes = props.startTime && props.endTime
-  let showLocation = Boolean(props.location)
+  let eventLength = moment.duration(props.endTime.diff(props.startTime)).asHours()
+  let allDay = eventLength === 24
+  let multiDay = eventLength > 24
+
+  let times = null
+  if (allDay) {
+    times = <Text style={[styles.timeText, styles.startTime]}>all-day</Text>
+  } else if (multiDay) {
+    times = [
+      <Text key={0} style={[styles.timeText, styles.startTime]}>{props.startTime.format('h:mma')}</Text>,
+      <Text key={1} style={[styles.timeText, styles.endTime]}>to {props.endTime.format('MMM. D h:mma')}</Text>,
+    ]
+  } else {
+    times = [
+      <Text key={0} style={[styles.timeText, styles.startTime]}>{props.startTime.format('h:mma')}</Text>,
+      <Text key={1} style={[styles.timeText, styles.endTime]}>{props.endTime.format('h:mma')}</Text>,
+    ]
+  }
 
   return (
     <View style={[styles.container, props.style]}>
-      <Text style={styles.itemTitle}>{title}</Text>
-      { showTimes ? <Text style={styles.itemPreview}>
-        {props.startTime.format('M/D h:mma')} — {props.endTime.format('M/D h:mma')}
-      </Text> : null }
-      { showLocation ? <Text style={styles.itemPreview}>
-        {props.location}
-      </Text> : null }
+      <View style={[styles.rowIllusion, styles.times]}>
+        {times}
+      </View>
+      <View style={[styles.rowIllusion, styles.texts]}>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.location}>{props.location}</Text>
+      </View>
     </View>
   )
 }