rghorbani / react-native-persian-calendar-picker

Persian Calendar Picker Component for React Native
MIT License
93 stars 26 forks source link
calendar calendar-component calendar-picker-component persian-calendar react-native

React Native Jalaali (Persian) Calendar

NPM Version Build Status

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:

Order of precedence:

Suggestions?

Open Issues. Submit PRs.