This is a very light component that makes it possible to preview the month days of a given date then it returns the selected day when clicked;
The component's width is responsive, it takes the width of the parent element.
npm i react-calendar-simple --save
import React from 'react';
import ReactDOM from 'react-dom';
import Calendar from 'react-calendar-simple';
ReactDOM.render(
<Calendar
focusOnDate={new Date()}
onDateSelection={(date)=>{console.log(date)}}/>,
document.getElementById('root')
);
When the user selects a given date the value can be retreived by the props function [onDateSelection].
Prop | is Required ? | Description |
---|---|---|
Date : focusOnDate | true | The initial date value from of the calendar, only the day and the year of the Date Object are important to generate the calendar |
Function: onDateSelection(Date) | true | A callback function that is executed when a day is selected on the calendar |
Array: daysArray | false | This is a JavaScript Array that must be of length 7, it represents the 7 days of the week, by default it is set to["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] |
For any suggestion you can open an issue here.
MIT