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

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.