Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smallstonesk/react-native-draggable-calendar
A calendar component supporting dragging.
https://github.com/smallstonesk/react-native-draggable-calendar
calendar react-native
Last synced: about 1 month ago
JSON representation
A calendar component supporting dragging.
- Host: GitHub
- URL: https://github.com/smallstonesk/react-native-draggable-calendar
- Owner: SmallStoneSK
- Created: 2018-05-06T05:02:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-06T11:57:29.000Z (over 5 years ago)
- Last Synced: 2024-11-18T11:05:54.900Z (about 2 months ago)
- Topics: calendar, react-native
- Language: JavaScript
- Size: 744 KB
- Stars: 104
- Watchers: 5
- Forks: 18
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## DraggableCalendar
A calendar component supporting dragging operation.
## 1. Examples
Download the repository, cd the examples directory, and run it on simulator.
```bash
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:
```bash
npm install react-native-draggable-calendar --save
```
1. For basic usage, you can use it as following:
```javascript
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 (
this._calendar = _}
onSelectionChange={this.onSelectionChange}
/>
Get Time
);
}
}
```
2. As it has provided a default style, you can use it as following for in-depth customization.
```javascript
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 (
);
}
}
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.
1. pass fullDateRange and availableDateRange. Like this:
```javascript
```
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.
2. pass maxDays. Like this:
```javascript
```
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:
```javascript
this.yourRenderDay(data)}
renderMonthHeader={identifier => this.yourRenderMonthHeader(identifier)}
/>
```
**Note**
The data passed to yourRenderDay is an object:
```javascript
{
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:
```javascript
'2018-05' // you can use identifier.split('-') to get the year and month
```