0.1.1 • Published 5 months ago

@enipx/react-native-calendar v0.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

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

PropertyTypeDescription
datestringdefault date: format is YYYY-MM-DD
onSelectedDay(date: Date) => voidcallback method when an date is selected
fontstringchange component font
textColorstringchange text color
hideOtherMonthDaysbooleanhide other month days
highlightCalendarHightlightTypespecify range of date to highlight
markedDaysstring[]specify dates to mark
activeColorstringactive color: default is #8A72FB
inActiveColorstringin active color: default is rgba(0,0,0,0.3)
sizenumberupdate day button size
borderRadiusnumberupdate day border radius
textStyleStyleProp<TextStyle>update text style
weekDayTextStyleStyleProps<TextStyle>update weekdays text button style
weekDayContainerStyleStyleProp<ViewStyle>update week days container style style
styleStyleProp<ButtonStyle>update button style
markSizenumberupdate mark size
markColornumberupdate mark color
markStyleStyleProps<ViewStyle>update mark style
selectedDayBackgroundColorstringupdate selected day background color
selectedDayTextColorstringupdate selected day text color
selectedDayStyleStyleProps<ViewStyle>update selected day button style
highlightBackgroundColorstringupdate highlight day background color
highlightTextColorstringupdate highlight day text color
todayBackgroundColorstringupdate today background color
todayTextColorstringupdate today text color
todayStyleStyleProps<ViewStyle>update today button style
nextElementJSX.Elementupdate next button element
previousElementJSX.Elementupdate previous button element
nextElementStyleStyleProps<ViewStyle>update next button style
previousElementStyleStyleProps<ViewStyle>update previous button style

License

MIT ©

0.1.1

5 months ago

0.1.0

6 months ago