DraggableCalendar
A calendar component supporting dragging operation.
1. Examples
Download the repository, cd the examples directory, and run it on simulator.
git clone [email protected]:SmallStoneSK/react-native-draggable-calendar.git
cd examples
react-native run-ios # for ios
react-native run-android # for android
2. Usage
At first, you should install react-native-draggable-calendar. Like this:
npm install react-native-draggable-calendar --save- For basic usage, you can use it as following:
export class BasicUsageDemo extends Component {
constructor(props) {
super(props);
}
onGetTime = () => {
// you can get the selected time.
console.log('onGetTime: ', this._calendar.getSelection());
};
onSelectionChange = (newSelection) => {
// when selected time changes, this func will be called.
console.log('onSelectionChange', newSelection);
};
render() {
return (
<View style={{flex: 1}}>
<DraggableCalendar
ref={_ => this._calendar = _}
onSelectionChange={this.onSelectionChange}
/>
<TouchableOpacity onPress={this.onGetTime} style={{
justifyContent: 'center', alignItems: 'center',
left: 0, right: 0, bottom: 0, paddingVertical: 15,
position: 'absolute', backgroundColor: '#4291EF'
}}>
<Text style={{color: '#FFF'}}>Get Time</Text>
</TouchableOpacity>
</View>
);
}
}- As it has provided a default style, you can use it as following for in-depth customization.
export class CustomizationDemo extends Component {
_genStyles() {
return {
style: styles.draggableContainer,
headerTextStyle: styles.dayText,
monthHeaderTextStyle: styles.dayText,
dayTextStyle: styles.dayText,
selectedDayTextStyle: styles.selectedDayText,
singleDayContainerStyle: styles.selectedDayContainer,
beginDayContainerStyle: styles.selectedDayContainer,
middleDayContainerStyle: styles.selectedDayContainer,
endDayContainerStyle: styles.selectedDayContainer
};
}
render() {
return (
<DraggableCalendar {...this._genStyles()}/>
);
}
}
const styles = StyleSheet.create({
draggableContainer: {
backgroundColor: '#303E4D'
},
dayText: {
color: '#EAC351'
},
selectedDayText: {
color: '#303E4D'
},
selectedDayContainer: {
backgroundColor: '#EAC351'
}
});For detailed xxxStyle meaning, you can see the following picture:
3. Others
1. Decide how many month to render.
You have two ways to deside this.
- pass fullDateRange and availableDateRange. Like this:
<DraggableCalendar
fullDateRange={[new Date(2018, 4, 1, 0, 0, 0), new Date(2018, 6, 31, 0, 0, 0)]}
availableDateRange={[new Date(2018, 4, 21, 0, 0, 0), new Date(2018, 6, 31, 0, 0, 0)]}
/>So, the date between 5.1~5.20 will not be selected. You'd better specify the first day of a month and the last day of a month to fullDateRange.
- pass maxDays. Like this:
<DraggableCalendar maxDays={180}/>In this way, the availableDateRange will be [today, today + 180]. And the fullDateRange will be [first day of this month, last day of the month containing (today + 180)].
2. Customize your render content.
If you are not satisfied with the customization above, you can even pass renderMonthHeader/renderDay function to DraggableCalendar. Like this:
<DraggableCalendar
renderDay={data => this.yourRenderDay(data)}
renderMonthHeader={identifier => this.yourRenderMonthHeader(identifier)}
/>Note
The data passed to yourRenderDay is an object:
{
date // a date obj
status // indicating its selected status. (enum value: see DAY_STATUS in Helper.js)
available // indicating whether this day is touchable
}the identifier passed to yourRenderMonthHeader is a string:
'2018-05' // you can use identifier.split('-') to get the year and month