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';