https://github.com/faichou/react-native-slideable-calendar-strip
A react native calendar strip that support swipe!
https://github.com/faichou/react-native-slideable-calendar-strip
calendar reactnative swipe
Last synced: 5 months ago
JSON representation
A react native calendar strip that support swipe!
- Host: GitHub
- URL: https://github.com/faichou/react-native-slideable-calendar-strip
- Owner: FaiChou
- Created: 2018-05-21T06:55:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-09T16:50:14.000Z (over 4 years ago)
- Last Synced: 2025-08-06T17:58:01.200Z (5 months ago)
- Topics: calendar, reactnative, swipe
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-slideable-calendar-strip
- Size: 193 KB
- Stars: 98
- Watchers: 3
- Forks: 56
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## react-native-slideable-calendar-strip [](https://travis-ci.org/FaiChou/react-native-slideable-calendar-strip) [](https://www.npmjs.com/package/react-native-slideable-calendar-strip) [](https://juejin.im/post/5b041fe66fb9a07aa43c8c8c) 
[Live Calendar Demo.mp4](https://raw.githubusercontent.com/FaiChou/faichou.github.io/master/img/qiniu/calendar-strip.MP4)
### Feature
1. Support pull down gesture
2. Support go today
3. Support support marked date
4. Support Chinese lunar
5. Support current week of this year (W21)
6. Support both `Date` and Date string `('2018-01-01')` types
7. Support customized start of week
### How to use
Install package:
```
npm install --save react-native-slideable-calendar-strip
# or
yarn add react-native-slideable-calendar-strip
```
Import to your app:
```
import CalendarStrip from 'react-native-slideable-calendar-strip';
```
Use the component:
```
{
this.setState({ selectedDate: date });
}}
onPressGoToday={(today) => {
this.setState({ selectedDate: today });
}}
onSwipeDown={() => {
alert('onSwipeDown');
}}
markedDate={['2018-05-04', '2018-05-15', '2018-06-04', '2018-05-01']}
weekStartsOn={1} // 0,1,2,3,4,5,6 for S M T W T F S, defaults to 0
/>
```
### API
API name | Desc
-----------------|----------------------------------------
selectedDate | The current selected date, Required.
onPressDate | Press date callback, Optional, `(date) => {}`
onPressGoToday | Press gotoday button callback, Optional, `(today) => {}`
markedDate | Marked highlighted date array, Optional, `['2018-01-01', '2018-02-01']`
onSwipeDown | Swipe down gesture callback, Optional, `() => {}`
isChinese | Show Chinese Week or not, default false,
showChineseLunar | Show Chinese Lunar or not, default false,
showWeekNumber | Show week number or not, default false,
weekStartsOn | Set start of week, Optional, defaults to 0, `0 1 2 3 4 5 6` for `S M T W T F S`