React Native Jalaali (Persian) Calendar

This is a Jalaali (Persian) Calendar Picker Component for React Native

The package is both Android and iOS compatible.

Installation

$ yarn add react-native-persian-calendar-picker

or

$ npm install react-native-persian-calendar-picker --save

Prerequisites

CalendarPicker requires Moment JS. Date props may be anything parseable by Moment: Javascript Date, Moment date, or ISO8601 datetime string.

Usage

How to use it:

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import PersianCalendarPicker from 'react-native-persian-calendar-picker';

class PersianCalendarPickerExample extends React.Component {
  constructor(props) {
		super(props);

    this.state = {
      selectedStartDate: null,
    };

		this.onDateChange = this.onDateChange.bind(this);
  }

  onDateChange(date) {
    this.setState({ selectedStartDate: date });
  }

  render() {
    const { selectedStartDate } = this.state;
    const startDate = selectedStartDate ? selectedStartDate.toString() : '';
    return (
      <View style={styles.container}>

        <PersianCalendarPicker
          onDateChange={this.onDateChange}
				/>

        <View>
          <Text>SELECTED DATE:{ startDate }</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    marginTop: 100,
  },
});

PersianCalendarPicker props

| Prop | Type | Description | :------------ |:---------------| :-----| | isRTL | Boolean | Optional. Force layout to be RTL. Default is false | | weekdays | Array | Optional. List of week days. Eg. ['Sat', 'Sun', ...] Must be 7 days | | months | Array | Optional. List of months names. Eg. ['Farvardin', 'Ordibehesht', ...] Must be 12 months | | allowRangeSelection | Boolean | Optional. Allow to select date ranges. 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 | | 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 | | selectedRangeStartStyle | ViewStyle | Optional. Style for range selected start day. | | selectedRangeEndStyle | ViewStyle | Optional. Style for range selected end day. | | selectedRangeStyle | ViewStyle | Optional. Style for all days in 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). | | 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 | Object | Optional. Style overall text. Change fontFamily, color, etc. | | customDatesStyles | Array | Optional. Style individual date(s). Array of objects {date: Moment-parseable date, containerStyle: ViewStyle, 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.| | swipeConfig | Object | Optional. Config passed to Swiper.| | enableSwipe | Boolean | Optional. Whether to enable swiping. Default is true | | enableDateChange | Boolean | Optional. Whether to enable pressing on day. Default is true | | onDateChange | Function | Optional. Callback when a date is selected. Returns Moment date as first parameter.| | onMonthChange | Function | Optional. Callback when Previous / Next month is pressed. Returns Moment date as first parameter.| | onSwipe | Function | Optional. Callback when swipe event is triggered. Returns swipe direction 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.|

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

Suggestions?

Open Issues. Submit PRs.