diff --git a/README.md b/README.md
index 8ba95cd..ee62812 100644
--- a/README.md
+++ b/README.md
@@ -244,6 +244,8 @@ An advanced agenda component that can display interactive listings for calendar
renderDay={(day, item) => {return ();}}
// specify how empty date content with no items should be rendered
renderEmptyDate={() => {return ();}}
+ // specify how agenda knob should look like
+ renderKnob={() => {return ();}}
// 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={{}}
diff --git a/example/src/screens/agenda.js b/example/src/screens/agenda.js
index 8b068fe..410763d 100644
--- a/example/src/screens/agenda.js
+++ b/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) => ({day ? day.day: 'item'})}
/>
);
diff --git a/src/agenda/index.js b/src/agenda/index.js
index edbfa16..80b094d 100644
--- a/src/agenda/index.js
+++ b/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 = ();
if (!this.props.hideKnob) {
+ const knobView = this.props.renderKnob ? this.props.renderKnob() : ();
knob = this.state.calendarScrollable ? null : (
- this.knob = c}/>
+ this.knob = c}>{knobView}
);
}
diff --git a/src/agenda/platform-style.ios.js b/src/agenda/platform-style.ios.js
index 9efe3ee..73758d5 100644
--- a/src/agenda/platform-style.ios.js
+++ b/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',
diff --git a/src/agenda/platform-style.js b/src/agenda/platform-style.js
index 35ffe3a..c9b2c21 100644
--- a/src/agenda/platform-style.js
+++ b/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',
diff --git a/src/style.js b/src/style.js
index 9eb3afd..f8436ed 100644
--- a/src/style.js
+++ b/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';