react-native-calendar-component

@optisolbusiness/react-native-calendar-component

Installation

npm i @optisolbusiness/react-native-calendar-component

Usage

import { CalendarComponent } from '@optisolbusiness/react-native-calendar-component';

// ...

<CalendarComponent/>;

CalendarPicker Props

| Prop | Type | Description | :------------ |:---------------| :-----| | weekdays | Array | Optional. List of week days. Eg. ['Mon', 'Tue', ...] Must be 7 days | | months | Array | Optional. List of months names. Eg. ['Jan', 'Feb', ...] Must be 12 months | | firstDay | Number | Optional. Default first day of week will be Sunday. You can set start of week with number from 0 to 6. Default is 0 or Sunday | | startFromMonday | Boolean | Optional. Default first day of week will be Sunday. You can set start of week from Monday by setting this to true. Default is false | | showDayStragglers | Boolean | Optional. Populate previous & next month days in empty slots. Default is false | | allowRangeSelection | Boolean | Optional. Allow to select date ranges. Default is false | | allowBackwardRangeSelect | Boolean | Optional. Allow selecting range in reverse. Default is false | | previousTitle | String | Optional. Title of button for previous month. Default is Previous | | nextTitle | String | Optional. Title of button for next month. Default is Next | | previousTitleStyle | TextStyle | Optional. Text styling for Previous text.| | nextTitleStyle | TextStyle | Optional. Text styling for Next text.| | previousComponent | Object | Optional. Component to use in Previous button. Overrides previousTitle & previousTitleStyle. | | nextComponent | Object | Optional. Component to use in Next button. Overrides nextTitle & nextTitleStyle. | | selectedDayColor | String | Optional. Color for selected day | | selectedDayStyle | ViewStyle | Optional. Style for selected day. May override selectedDayColor.| | selectedDayTextColor | String | Optional. Text color for selected day | | selectedDayTextStyle | Object | Optional. Text style for selected day (including all days in range) | | selectedRangeStartTextStyle | Object | Optional. Text style for start day of range | | selectedRangeEndTextStyle | Object | Optional. Text style for end day of range | | selectedRangeStartStyle | ViewStyle | Optional. Container style for start day of range. | | selectedRangeEndStyle | ViewStyle | Optional. Container style for end day of range. | | selectedRangeStyle | ViewStyle | Optional. Container style for all days in range selection. | | selectedDisabledDatesTextStyle | Object | Optional. Text style for ineligible dates during range selection. | | disabledDates | Array or Function | Optional. Specifies dates that cannot be selected. Array of Dates, or a function that returns true for a given Moment date (apologies for the inverted logic). | | disabledDatesTextStyle | TextStyle | Optional. Text styling for disabled dates. | | selectedStartDate | Date | Optional. Specifies a selected Start Date. | | selectedEndDate | Date | Optional. Specifies a selected End Date. | | minRangeDuration | Number or Array | Optional. Specifies a minimum range duration when using allowRangeSelection. Can either pass a number to be used for all dates or an Array of objects if the minimum range duration depends on the date {date: Moment-parsable date, minDuration: Number} | | maxRangeDuration | Number or Array | Optional. Specifies a maximum range duration when using allowRangeSelection. Can either pass a number to be used for all dates or an Array of objects if the maximum range duration depends on the date {date: Moment-parsable date, maxDuration: Number} | | todayBackgroundColor | String | Optional. Background color for today. Default is #cccccc | | todayTextStyle | TextStyle | Optional. Text styling for today. | | textStyle | TextStyle | Optional. Style overall text. Change fontFamily, color, etc. | | customDatesStyles | Array or Func | Optional. Style individual date(s). Supports an array of objects {date: Moment-parseable date, containerStyle: ViewStyle, style: ViewStyle, textStyle: TextStyle, allowDisabled: Boolean}, or a callback which receives a date param and returns {containerStyle: ViewStyle, style: ViewStyle, textStyle: TextStyle, allowDisabled: Boolean} for that date. | | customDayHeaderStyles | Func | Optional. Style day of week header (Monday - Sunday). Callback that receives ISO {dayOfWeek, month, year} and should return {style: ViewStyle, textStyle: TextStyle} | | scaleFactor | Number | Optional. Default (375) scales to window width | | minDate | Date | Optional. Specifies minimum date to be selected | | maxDate | Date | Optional. Specifies maximum date to be selected | | initialDate | Date | Optional. Date that calendar opens to. Defaults to today. | | width | Number | Optional. Width of CalendarPicker's container. Defaults to Dimensions width.| | height | Number | Optional. Height of CalendarPicker's container. Defaults to Dimensions height.| | scrollable | Boolean | Optional. Months are scrollable if true. Default is false | | horizontal | Boolean | Optional. Scroll axis when scrollable set. Default is true | | enableDateChange | Boolean | Optional. Whether to enable pressing on day. Default is true | | restrictMonthNavigation | Boolean | Optional. Whether to disable Previous month button if it is before minDate or Next month button if it is after MaxDate. Default is false | | onDateChange | Function | Optional. Callback when a date is selected. Returns Moment date as first param; START_DATE or END_DATE as second param.| | onMonthChange | Function | Optional. Callback when Previous / Next month is pressed. Returns Moment date as first parameter.| | dayShape | String | Optional. Shape of the Day component. Default is circle. Available options are circle and square.| | headingLevel | Number | Optional. Sets the aria-level for the calendar title heading when on Web. Default is 1.| | selectMonthTitle | String | Optional. Title of month selector view. Default is "Select Month in " + {year}.| | selectYearTitle | String | Optional. Title of year selector view. Default is "Select Year".| | dayLabelsWrapper | ViewStyle | Optional. Style for weekdays wrapper. E.g If you want to remove top and bottom divider line.| | enableSwipe | Deprecated | Use scrollable. | | swipeConfig | Deprecated | Use scrollable. | | onSwipe | Deprecated | Use onMonthChange. | | dayOfWeekStyles | Deprecated | Use customDatesStyles & customDayHeaderStyles callbacks to style individual dates, days of week, and/or header. | | customDatesStylesPriority | Deprecated | Use customDatesStyles & customDayHeaderStyles callbacks to style individual dates, days of week, and/or header. | | monthYearHeaderWrapperStyle | ViewStyle | Optional. Style for header MonthYear title wrapper. E.g If you want to change the order of year and month.| | headerWrapperStyle | ViewStyle | Optional. Style for entire header controls wrapper. This contains the previous / next controls plus month & year.| | monthTitleStyle | TextStyle | Optional. Text styling for header's month text.| | yearTitleStyle | TextStyle | Optional. Text styling for header's year text.| | initialView | String | Optional. The view that the calendar opens to. Default is days. Available options are years, months, and days.|

Styles

Some styles will overwrite some won't. For instance:

• If you provide textStyle with fontFamily and color, out of ranges dates will not apply your color, just fontFamily.

Order of precedence:

• defaultColor => textStyle => selectedDayColor
• defaultTodayBackgroundColor => todayBackgroundColor
• defaultBackgroundColor => selectedDayColor
• defaultTextStyles => textStyle => selectedDayTextColor

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