https://github.com/hungdev/react-native-customize-selected-date
a component calendar date allow customize event date. (support android & ios). Pull requests are welcome!
https://github.com/hungdev/react-native-customize-selected-date
calendar customize-date customize-event event react-native
Last synced: 4 months ago
JSON representation
a component calendar date allow customize event date. (support android & ios). Pull requests are welcome!
- Host: GitHub
- URL: https://github.com/hungdev/react-native-customize-selected-date
- Owner: hungdev
- License: mit
- Created: 2018-11-29T10:34:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T20:54:32.000Z (about 3 years ago)
- Last Synced: 2025-08-31T06:08:43.349Z (5 months ago)
- Topics: calendar, customize-date, customize-event, event, react-native
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-customize-selected-date
- Size: 4.2 MB
- Stars: 17
- Watchers: 1
- Forks: 13
- Open Issues: 14
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Customize Selected Date
# Install
```js
npm install react-native-customize-selected-date --save
npm install react-native-vector-icons --save
react-native link react-native-vector-icons
```
# Usage:
```javascript
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image } from 'react-native';
import DateTime from 'react-native-customize-selected-date'
import _ from 'lodash'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
time: ''
}
}
onChangeDate(date) {
alert(date)
}
renderChildDay(day) {
if (_.includes(['2018-11-15', '2018-12-10', '2018-12-20'], day)) {
return
}
if (_.includes(['2018-11-16', '2018-12-12', '2018-12-21', '2018-12-18'], day)) {
return
}
}
render() {
return (
this.onChangeDate(date)}
format='YYYY-MM-DD'
renderChildDay={(day) => this.renderChildDay(day)}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
icLockRed: {
width: 13 / 2,
height: 9,
position: 'absolute',
top: 2,
left: 1
}
});
```
# Props
Property | Type | Description
------------ | ------------- | -------------
date | PropTypes.string | Default date
changeDate | PropTypes.func | function call back after select date
format | PropTypes.array | Format date output
renderChildDay | PropTypes.func | return child element injected to date
customWeekdays | PropTypes.func | Array Weekdays, default: ['Sun', 'Mon', 'Tus', 'Wes', 'Thu', 'Fri', 'Sat']
renderPrevYearButton | PropTypes.func | Render function for customize prev year button
renderPrevMonthButton | PropTypes.func | Render function for customize prev month button
renderNextYearButton | PropTypes.func | Render function for customize next year button
renderNextMonthButton | PropTypes.func | Render function for customize next year button
# Styles
Property | Type | Description
------------ | ------------- | -------------
containerStyle | PropTypes.object | Container Style
warpRowControlMonthYear | PropTypes.object | Style for row control next or prev month, year.
warpRowWeekdays | PropTypes.object | Warp row weekdays style
weekdayStyle | PropTypes.object | Weekday text style
warpDayStyle | PropTypes.object | Style for each day in month
dateSelectedWarpDayStyle | PropTypes.object | Style for selected day in month
textDayStyle | PropTypes.object | Style for text day in month
currentDayStyle | PropTypes.object | Style for text current day in month
notCurrentDayOfMonthStyle | PropTypes.object | Style for text when day is not current day in month
# License
This project is licenced under the MIT License.
Any bundled fonts are copyright to their respective authors and mostly under MIT or SIL OFL.
# Pull Request
Pull requests are welcome!