React-native_horizontal_calender NPM

:dart: About

React native component which renders list of dates.

:dart: Demo

:dart: Installation

npm i react-native_horizontal_calender

:dart: Example

function App(): JSX.Element {
 
  const [receivedDate, setReceivedDate] = useState<Date>(currentDate);

  const handleDataFromCalender = (date:Date) => {
    console.log('date',date)
    setReceivedDate(date);
  };

  return (
    <View>
      <HorizontalCalender
        onPressed={handleDataFromCalender}
        populateDatesOnLastDateSelect={true}
        userSelectedDate={currentDate}
        startingDate={currentDate}
        numberOfDays={10}
      />
      <Text style={styles.sectionDescription}>{receivedDate.toISOString() }</Text>
    </View>
  );
}

:dart: Platform Support

Supports both Android and iOS.

:dart: Props

Prop	Type	Optional	Default	Description
userSelectedDate	Date	No	n/a	User current date or selected date
onPressed	(date: Date) => void	No	n/a	callback which provides selected date as an argument.
startingDate	Date	No	n/a	Starting point of the calender
numberOfDays	number	Yes	10	Number of days you want to populate
populateDatesOnLastDateSelect	boolean	Yes	true	Use this value if you want to populate dates further on last date select
horizontal	boolean	Yes	true	Show calender horizontal or not