Persian Calendar Picker Component for React Native

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-general-calendars

or

$ npm install react-native-general-calendars --save

Usage

How to use it:

const React = require('react');
const {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  View
} = require('react-native');
const PersianCalendarPicker = require('react-native-persian-calendar-picker');

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

    this.state = {
      date: new Date(),
    };

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

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

  render() {
    return (
      <View style={styles.container}>

        <PersianCalendarPicker
          selectedDate={this.state.date}
          onDateChange={this.onDateChange}
          screenWidth={Dimensions.get('window').width}
          selectedBackgroundColor="#5ce600"
				/>

        <Text style={styles.selectedDate}> Date: { this.state.date.toString() } </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 30,
  },
  selectedDate: {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    color: '#000',
  },
});

CalendarPicker props

To Do:

• [ ] Add swipe gestures

Suggestions?

Drop an email to [email protected]

Open issues

Submit PRs.

GitHub