0.1.0 • Published 9 months ago
react-native-calender-view v0.1.0
react-native-calender-view
Calendar UI view for react native apps
Installation
npm install react-native-calender-view
Usage
import CalenderView from 'react-native-calender-view';
// ...
<CalenderView
onDatePress={(date, events) => console.log('Date Pressed', date, events)}
/>;
Props
name | description | type | default |
---|---|---|---|
date | Initial date showned date | Date | today |
markedDates | See below for more details | ReactNode | - |
onDatePress | Date Press function which gives date and events has a params | Function | - |
selectedDateStyle | Selected date style | ViewStyle | - |
selectedDateColor | Selected Date Color | ColorValue | - |
weekContainerStyle | week contianer styles | ViewStyle | - |
containerStyle | Container Style | ViewStyle | - |
dateStyle | Date Style mostly used for coloring the box | ViewStyle | - |
weekEndColor | Used for assign color for weekends dates | ColorValue | - |
markedDates
object which is accept dates has formatted DD-MM-YYYY dates to show on that date is any event was present or not.
Type | Required |
---|---|
object | No |
import CalenderView, { getFormattedDDMMYYYY } from 'react-native-calender-view';
const today = getFormattedDDMMYYYY(new Date()) // this utility function auto format date to required format which accepts "Date" has param
// ...
<CalenderView
onDatePress={(date, events) => console.log('Date Pressed', date, events)}
markedDates={{
['20-02-2023']: {
events: [''], // Event array which would be return when "onDatePress"
},
[today]: {
style?: ViewStyle,
events?: any[],
dotColors?: ColorValue[]
}
}}
/>;
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library
0.1.0
9 months ago