1.0.2 • Published 3 years ago

another-react-native-simple-calendar v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

react-native-simple-calendar

React Native calendar component and date slider

Installation

npm i another-react-native-simple-calendar

npm.io

Usage

import React, {useState} from 'react';
import {Text, View} from 'react-native';
import {Calendar, DateSlider} from 'another-react-native-simple-calendar';
import dayjs from 'dayjs';

const App = () => {
  const [date, setDate] = useState(dayjs());

  return (
    <View style={styles.appContainer}>
      <Text style={styles.text}>Swipe or tap to change date</Text>
      <DateSlider
        style={styles.dateSliderContainer}
        date={date}
        setDate={setDate}
        type="day"
        format="D MMM YYYY"
      />
      <DateSlider
        style={styles.dateSliderContainer}
        date={date}
        setDate={setDate}
        type="month"
        format="MMMM"
      />
      <DateSlider
        style={styles.dateSliderContainer}
        date={date}
        setDate={setDate}
        type="year"
        format="YYYY"
      />
      <Calendar date={date} setDate={setDate} />
    </View>
  );
};

export default App;

DateSlider Methods

setDate(date)

ParamsTypeDescription
dateDayjsSelected date

DateSlider Props

NameTypeDefaultDescription
dateDayjstoday dateDate value in dayjs lib format
typestring'month''day', 'month' or 'year'
formatstring'MMMM'Date format (https://day.js.org/docs/en/display/format)
iconPropsSvgProps-Props of arrow icons (width, height, viewBox, preserveAspectRatio, color, title)
textStyleTextStyle-React native text style
styleViewStyle-React native view style

Calendar Methods

setDate(date)

ParamsTypeDescription
dateDayjsSelected date

DateSlider Props

NameTypeDefaultDescription
dateDayjstoday dateDate value in dayjs lib format
containerStyleViewStyle'- 'React native view style
backgroundColorstring'#5cb2e4'Background color value
selectedDayColorstring'#ffffff'Selected day color value
todayColorstring'#319EDC'Today color value
weekdayColorstring'#C2E2F5'Week day color value
selectedMonthColorstring'#ffffff'Selected month color value
notSelectedMonthColorstring'#C2E2F5'Not selected mmonth color value