feat(agenda): add knob customization options

fixes wix-incubator#32

README.md

@@ -244,6 +244,8 @@ An advanced agenda component that can display interactive listings for calendar
   renderDay={(day, item) => {return (<View />);}}
   // specify how empty date content with no items should be rendered
   renderEmptyDate={() => {return (<View />);}}
+  // specify how agenda knob should look like
+  renderKnob={() => {return (<View />);}}
   // specify your item comparison function for increased performance
   rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
   // Hide knob button. Default = false
@@ -253,7 +255,8 @@ An advanced agenda component that can display interactive listings for calendar
     ...calendarTheme,
     agendaDayTextColor: 'yellow',
     agendaDayNumColor: 'green',
-    agendaTodayColor: 'red'
+    agendaTodayColor: 'red',
+    agendaKnobColor: 'blue'
   }}
   // agenda container style
   style={{}}

example/src/screens/agenda.js

@@ -24,7 +24,7 @@ export default class AgendaScreen extends Component {
         renderEmptyDate={this.renderEmptyDate.bind(this)}
         rowHasChanged={this.rowHasChanged.bind(this)}
         // monthFormat={'yyyy'}
-        //theme={{calendarBackground: 'red'}}
+        // theme={{calendarBackground: 'red', agendaKnobColor: 'green'}}
         //renderDay={(day, item) => (<Text>{day ? day.day: 'item'}</Text>)}
       />
     );

src/agenda/index.js

@@ -45,6 +45,8 @@ export default class AgendaView extends Component {
     renderItem: PropTypes.func,
     // specify how each date should be rendered. day can be undefined if the item is not first in that day.
     renderDay: PropTypes.func,
+    // specify how agenda knob should look like
+    renderKnob: PropTypes.func,
     // specify how empty date content with no items should be rendered
     renderEmptyDay: PropTypes.func,
     // specify your item comparison function for increased performance
@@ -308,9 +310,10 @@ export default class AgendaView extends Component {
     let knob = (<View style={this.styles.knobContainer}/>);
 
     if (!this.props.hideKnob) {
+      const knobView = this.props.renderKnob ? this.props.renderKnob() : (<View style={this.styles.knob}/>);
       knob = this.state.calendarScrollable ? null : (
         <View style={this.styles.knobContainer}>
-          <View style={this.styles.knob} ref={(c) => this.knob = c}/>
+          <View ref={(c) => this.knob = c}>{knobView}</View>
         </View>
       );
     }

src/agenda/platform-style.ios.js

@@ -5,7 +5,7 @@ export default function platformStyles(appStyle) {
       height: 7,
       marginTop: 10,
       borderRadius: 3,
-      backgroundColor: '#f2F4f5'
+      backgroundColor: appStyle.agendaKnobColor
     },
     weekdays: {
       position: 'absolute',

src/agenda/platform-style.js

@@ -5,7 +5,7 @@ export default function platformStyles(appStyle) {
       height: 7,
       marginTop: 10,
       borderRadius: 3,
-      backgroundColor: '#4ac4f7'
+      backgroundColor: appStyle.agendaKnobColor
     },
     weekdays: {
       position: 'absolute',

src/style.js

@@ -1,3 +1,5 @@
+import {Platform} from 'react-native';
+
 export const foregroundColor = '#ffffff';
 export const backgroundColor = '#f4f4f4';
 export const separatorColor = '#e8e9ec';
@@ -33,3 +35,4 @@ export const monthTextColor = textDefaultColor;
 export const agendaDayTextColor = '#7a92a5';
 export const agendaDayNumColor = '#7a92a5';
 export const agendaTodayColor = textLinkColor;
+export const agendaKnobColor = Platform.OS === 'ios' ? '#f2F4f5' : '#4ac4f7';