react-native-jumpable-calendar v1.0.4

react-native-jumpable-calendar

React Native calendar component for both Android and iOS. Users can use dropdown list to jump to any month in the range

Install

npm install react-native-jumpable-calendar --save

Example

Usage

import React, { Component } from 'react'
import Calendar from 'react-native-jumpable-calendar'

class _NewCalendar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentMonth: new Date().getMonth(),
      currentYear: new Date().getFullYear(),
      markedDates: {
        "2019-05-16": { selected: true, marked: true, selectedColor: "orange" },
        "2019-05-06": { selected: true, marked: true, selectedColor: "blue" },
        "2019-05-01": { selected: true, marked: true, selectedColor: "green" },
        "2019-05-17": { marked: true },
        "2019-06-18": { marked: true, dotColor: "red", activeOpacity: 0 },
        "2019-08-19": { disabled: true, disableTouchEvent: true },
      },
    };
  }
  render() {
    return (
        <View style={styles.calendarWrapper}>
          <Calendar
            pagingEnabled={true}
            scrollEnabled={true}
            pastScrollRange={50}
            futureScrollRange={50}
            showTodayButton={true}
            showMonthChooser={true}
            calendarWidth={300}
            onDayPress={day => {
              console.warn("day", day);
            }}
            markedDates={this.state.markedDates}
          />
        </View>
    );
  }
}

Properties