react-native-plain-calendar v1.0.8

React-Native-Plain-Calendar

This module includes customizable and flexibility react-native calendar component with possibility implement own picker or use existing in it.

Installation

npm i --save react-native-plain-calendar

The solution is implemented in TypeScript so no native module linking is required.

Examples

Usage

The simplest usage of this calendar component. This library hasn't got any required props, so to use it just import Calendar component

import React from 'react';
import { View } from 'react-native';
import { Calendar } from 'react-native-plain-calendar';

export default const App = () => (
  <View>
    <Calendar />
  </View>
);

Simple usage of picker

import React from 'react';
import { View } from 'react-native';
import { Calendar } from 'react-native-plain-calendar';

export default const App = () => {
  function onSelected ({ selected, selectedStart, selectedEnd }) {
    // Your code
  }

  return(
    <View>
      <Calendar.Picker 
        onSelected={onSelected} 
        selectedType='single-range' 
      />
    </View>
  );
};

Usage with custom header and day components

import React from 'react';
import { View } from 'react-native';
import { Calendar } from 'react-native-plain-calendar';
import { CustomHeaderComponent, CustomDayComponent } from './components'

export default const App = () => (
  <View>
    <Calendar.Picker
      disabledDates={[new Date('10/01/2020'), new Date('11/01/2020'), new Date('12/01/2020')]}
      HeaderComponent={({
        currentMonth,
        onPrevMonth,
        onNextMonth,
      }) => (
        <CustomHeaderComponent
          onPressLeft={onPrevMonth}
          title={currentMonth}
          onPressRight={onNextMonth}
        />
      )}
      DayComponent={({
        isToday,
        isSelectedDate,
        isSingleSelectedDate,
        isStartSelectedDate,
        isEndSelectedDate,
        isIntermediateSelectedDate,
        isDisabledDate,
        isDisabledParticularDate,
        date,
        onPress,
      }) => (
        <CustomDayComponent
          isToday={isToday}
          isSelectedDate={isSelectedDate}
          isSingleSelectedDate={isSingleSelectedDate}
          isStartSelectedDate={isStartSelectedDate}
          isEndSelectedDate={isEndSelectedDate}
          isIntermediateSelectedDate={isIntermediateSelectedDate}
          isDisabledDate={isDisabledDate}
          isDisabledParticularDate={isDisabledParticularDate}
          date={date}
          onPress={onPress}
        />
      )}
    />
  </View>
);

Calendar props

Calendar.Picker props

Takes the same props as Calendar and also takes extra props

License

MIT © Yura Pelehatiy 2019