0.1.1 • Published 5 months ago
@enipx/react-native-calendar v0.1.1
React Native Calendar
Simple React Native calendar with full customizable support that works really well on both iOS and Android⚡
Please note that this library was created for a personal use cases, but it suits basic needs.
If there is a particular feature you'd like to see in this library, please create a request for this.
Thanks for using.
Installation
Install dependencies:
$ yarn add date-fns @enipx/react-native-calendar
# or
$ npm i date-fns @enipx/react-native-calendar
Usage
import { Calendar, WeekCalendar } from '@enipx/react-native-calendar';
export default function App() {
return (
<View>
<Calendar
onSelectedDay={(day) => console.log(day)}
highlight={{ from: '2023-11-13', to: '2023-11-18' }}
markedDays={['2023-11-01', '2023-11-18', '2023-11-20']}
/>
<WeekCalendar
onSelectedDay={(day) => console.log(day)}
highlight={{ from: '2023-11-14', to: '2023-11-18' }}
/>
</View>
);
}
Props
Property | Type | Description |
---|---|---|
date | string | default date: format is YYYY-MM-DD |
onSelectedDay | (date: Date) => void | callback method when an date is selected |
font | string | change component font |
textColor | string | change text color |
hideOtherMonthDays | boolean | hide other month days |
highlight | CalendarHightlightType | specify range of date to highlight |
markedDays | string[] | specify dates to mark |
activeColor | string | active color: default is #8A72FB |
inActiveColor | string | in active color: default is rgba(0,0,0,0.3) |
size | number | update day button size |
borderRadius | number | update day border radius |
textStyle | StyleProp<TextStyle> | update text style |
weekDayTextStyle | StyleProps<TextStyle> | update weekdays text button style |
weekDayContainerStyle | StyleProp<ViewStyle> | update week days container style style |
style | StyleProp<ButtonStyle> | update button style |
markSize | number | update mark size |
markColor | number | update mark color |
markStyle | StyleProps<ViewStyle> | update mark style |
selectedDayBackgroundColor | string | update selected day background color |
selectedDayTextColor | string | update selected day text color |
selectedDayStyle | StyleProps<ViewStyle> | update selected day button style |
highlightBackgroundColor | string | update highlight day background color |
highlightTextColor | string | update highlight day text color |
todayBackgroundColor | string | update today background color |
todayTextColor | string | update today text color |
todayStyle | StyleProps<ViewStyle> | update today button style |
nextElement | JSX.Element | update next button element |
previousElement | JSX.Element | update previous button element |
nextElementStyle | StyleProps<ViewStyle> | update next button style |
previousElementStyle | StyleProps<ViewStyle> | update previous button style |
License
MIT ©