@optisolbusiness/react-native-calendar-component N

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`.