Adding functionality to the calendar

README.md

@@ -28,6 +28,8 @@ end | PropTypes.number | End time (default 24)
 headerIconLeft | PropTypes.element | If specified, renders this element instead of the default left arrow image
 headerIconRight | PropTypes.element | If specified, renders this element instead of the default right arrow image
 _goToDate | (date : string) => void | Requires the reference set using the `onRef` prop. E.g. `ref._goToDate('2017-09-07')`
+showRedLine | PropTypes.boolean | If you want to hide the red line
+onPressHour | PropTypes.function | When the function is sent it enables the time to be pressed and capture the event
 
 `EventCalendar` can be configured through a `styles` prop whereby any of the components in the calendar can be styled.
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-events-calendar",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "show calendar events by date",
   "main": "./src/EventCalendar.js",
   "scripts": {

src/DayView.js

@@ -1,5 +1,5 @@
 // @flow
-import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { View, Text, ScrollView, TouchableOpacity, TouchableNativeFeedback } from 'react-native';
 import populateEvents from './Packer';
 import React from 'react';
 import moment from 'moment';
@@ -77,46 +77,81 @@ export default class DayView extends React.PureComponent {
       />
     );
   }
-
+  _formatHour({ format24h, hour, start, half='' }) { 
+    let timeText;
+    if (hour === start && hour!==0 ) {
+      timeText = ``;
+    } else if (hour === 0) {
+      timeText = !format24h ? `12${half || ':00'} AM` : 24;
+    } else if (hour < 12) {
+      timeText = !format24h ? `${hour}${half || ':00'} AM` : hour;
+    } else if (hour === 12) {
+      timeText = !format24h ? `${hour}${half || ':00'} PM` : hour;
+    } else if (hour === 24) {
+      timeText = !format24h ? `12:00 AM` : 0;
+    } else {
+      timeText = !format24h ? `${hour - 12}${half} PM` : hour;
+    }
+    return timeText;
+  }
   _renderLines() {
-    const { format24h, start, end } = this.props;
+    const { format24h, start, end, onPressHour } = this.props;
     const offset = this.calendarHeight / (end - start);
 
     return range(start, end + 1).map((i, index) => {
-      let timeText;
-      if (i === start) {
-        timeText = ``;
-      } else if (i < 12) {
-        timeText = !format24h ? `${i} AM` : i;
-      } else if (i === 12) {
-        timeText = !format24h ? `${i} PM` : i;
-      } else if (i === 24) {
-        timeText = !format24h ? `12 AM` : 0;
-      } else {
-        timeText = !format24h ? `${i - 12} PM` : i;
-      }
+      const timeText = this._formatHour({ format24h, hour: i, start });
+      const value = { time: timeText, hour: i, start, end, format24h };
       const { width, styles } = this.props;
-      return [
+
+      const InterbalHour = [
         <Text
           key={`timeLabel${i}`}
-          style={[styles.timeLabel, { top: offset * index - 6 }]}
+          style={[styles.timeLabel, { top: offset * index - 6, marginTop:4 }]}
         >
           {timeText}
         </Text>,
+       onPressHour && (<TouchableNativeFeedback onPress={() => onPressHour({...value, minute:':00'})}    key={`touchOne${i}`}>
+        <View
+          key={`lineHalf${i}`}
+          style={[
+            {
+              height: 50,
+              position: 'absolute',
+              left: 50 - 1,
+            },
+            { top: offset * index, width: width - 20, marginTop:4 },
+          ]}
+          />
+      </TouchableNativeFeedback>),
         i === start ? null : (
           <View
             key={`line${i}`}
-            style={[styles.line, { top: offset * index, width: width - 20 }]}
+            style={[styles.line, { top: offset * index, width: width - 20, marginTop:4  }]}
           />
         ),
         <View
           key={`lineHalf${i}`}
           style={[
             styles.line,
-            { top: offset * (index + 0.5), width: width - 20 },
+            { top: offset * (index + 0.5), width: width - 20,  marginTop:4   },
           ]}
         />,
+        onPressHour && (<TouchableNativeFeedback  onPress={() => onPressHour({...value, minute:':30',time:this._formatHour({format24h, hour:i, start, half:':30'})})}     key={`touch${i}`}>
+          <View
+            key={`lineHalf${i}`}
+            style={[
+              {
+                height: 50,
+                position: 'absolute',
+                left: 50 - 1,
+              },
+              { top: offset * (index + 0.5), width: width - 20, marginTop:4  },
+            ]}
+            />
+        </TouchableNativeFeedback>),
       ];
+
+      return InterbalHour
     });
   }
 
@@ -154,17 +189,16 @@ export default class DayView extends React.PureComponent {
       const numberOfLines = Math.floor(event.height / TEXT_LINE_HEIGHT);
       const formatTime = this.props.format24h ? 'HH:mm' : 'hh:mm A';
       return (
-        <TouchableOpacity
-          activeOpacity={0.5}
-          onPress={() =>
-            this._onEventTapped(this.props.events[event.index])
-          }
-          key={i} style={[styles.event, style, event.color && eventColor]}
-        >
+        <View key={i} style={[styles.event, style, event.color && eventColor, {marginTop:4}]}>
           {this.props.renderEvent ? (
-            this.props.renderEvent(event)
+            this.props.renderEvent({...event, numberOfLines})
           ) : (
-            <View>
+            <TouchableOpacity
+              activeOpacity={0.5}
+              onPress={() =>
+                this._onEventTapped(this.props.events[event.index])
+              }
+            >
               <Text numberOfLines={1} style={styles.eventTitle}>
                 {event.title || 'Event'}
               </Text>
@@ -182,9 +216,9 @@ export default class DayView extends React.PureComponent {
                   {moment(event.end).format(formatTime)}
                 </Text>
               ) : null}
-              </View>
+            </TouchableOpacity>
           )}
-        </TouchableOpacity>
+        </View>
       );
     });
 
@@ -196,7 +230,7 @@ export default class DayView extends React.PureComponent {
   }
 
   render() {
-    const { styles } = this.props;
+    const { styles, showRedLine } = this.props;
     return (
       <ScrollView
         ref={ref => (this._scrollView = ref)}
@@ -207,7 +241,7 @@ export default class DayView extends React.PureComponent {
       >
         {this._renderLines()}
         {this._renderEvents()}
-        {this._renderRedLine()}
+        {showRedLine && this._renderRedLine()}
       </ScrollView>
     );
   }

src/EventCalendar.js

@@ -17,10 +17,8 @@ import DayView from './DayView';
 export default class EventCalendar extends React.Component {
   constructor(props) {
     super(props);
-
     const start = props.start ? props.start : 0;
     const end = props.end ? props.end : 24;
-
     this.styles = styleConstructor(props.styles, (end - start) * 100);
     this.state = {
       date: moment(this.props.initDate),
@@ -75,6 +73,7 @@ export default class EventCalendar extends React.Component {
       end = 24,
       formatHeader,
       upperCaseHeader = false,
+      showRedLine = true,
     } = this.props;
     const date = moment(initDate).add(index - this.props.size, 'days');
 
@@ -113,6 +112,7 @@ export default class EventCalendar extends React.Component {
           </TouchableOpacity>
         </View>
         <DayView
+          onPressHour={this.props.onPressHour}
           date={date}
           index={index}
           format24h={format24h}
@@ -126,6 +126,7 @@ export default class EventCalendar extends React.Component {
           scrollToFirst={scrollToFirst}
           start={start}
           end={end}
+          showRedLine={showRedLine}
         />
       </View>
     );
@@ -179,7 +180,6 @@ export default class EventCalendar extends React.Component {
       width,
       virtualizedListProps,
       events,
-      initDate,
     } = this.props;
 
     return (