react-date-range-calendar

React Calendar to pick the range between two dates and easily customizable.

Example

Here is the working calendar example.

Live Demo

Click to Edit Code ON codesandbox.io

Click to watch working Calendar Demo

Instalation & Configuration

npm install --save react-date-range-calendar

---

and after installation , Import this package where you want to use the calendar...

import Calendar from "react-date-range-calendar";

Use it in this way...

   <Fragment>
       <Calendar />
   </Fragment>

Support :

All major browsers are supported , If you want to run it on IE 9,10,11 . For that you will have to add polyfills for all the things like foreach, closest, es7-object-polyfill and react-app-polyfill

Functional Guide

Property Name	Description	Type	Short Example
onSelect	This method is called, when user selects the end date, here validDateRange parameter gives the array of available dates and removes the disabled dates from the range	function	<Calendar onSelect= {(startDate, endDate,validDateRange) => { // do whatever you want to do }} />
onChange	This method is called, when user selects the start date or end date mean in both cases	function	<Calendar onChange = {(selectedDate) => {console.log('selected date',selectedDate); }} />
selectedRange	date range that will be by default selected, should be of type Array e.g.[startDate,endDate]	Array	<Calendar selectedRange= {["2019-03-03","2019-03-07"]} />
disabledDates	disable the dates those get returned by this method in the array format	function	<Calendar disabledDates= {() => { return ["2019-03-01","2019-03-02","2019-03-08"] } } />
disablePrevDates	disable the previous dates, by default it's value is false	boolen	<Calendar disabledPrevDates= {true} />

Style Guide

Property Name	Description	Type	Short Example
leftArrowCss	This sets the css in 'string' format for left calendar Arrow icon, write css just like normal css you write with some extra things like if you want to put Hover Effect you could implement that just by writing this way &:hover{ // your css when you hover over it }	string	<Calendar leftArrowCss = "background: white; &:hover { background: green; }" />
rightArrowCss	This sets the css in 'string' format for right calendar Arrow icon, write css just like normal css you write usually with hover effect similar to leftArrowCss Prop	string	<Calendar rightArrowCss = "background: white; &:hover { background: green; }" />
leftMonthYearCss	This sets the css in 'string' format for left calendar's Month and Year text, write normal css with hover effect if needed similar to above string type css props	string	<Calendar leftMonthYearCss = "font-size:14px; }" />
rightMonthYearCss	This sets the css in 'string' format for right calendar's Month and Year text, write normal css with hover effect if needed similar to above string type css props	string	<Calendar rightMonthYearCss = "font-size:14px; }" />
leftCalHeaderCss	This sets the css in 'string' format for left calendar's header, write normal css similar to above string type css props	string	<Calendar leftCalHeaderCss = "background:red; }" />
rightCalHeaderCss	This sets the css in 'string' format for right calendar's header, write normal css similar to above string type css props	string	<Calendar rightCalHeaderCss = "background:red; }" />
thCss	This sets the css in 'string' format for both calendar's day headings, write normal css similar to above string type css props	string	<Calendar thCss = "background:red; }" />
globalCss	This sets the css in 'string' format that could get applied on both of the calendars globally, write normal css similar to above string type css props but with functionality to perform any css operation on any point or element of the calendar. Remember! This global css will not be applied on td elements. For that look at cssObj props	string	<Calendar globalCss = "*{ font-size: 14px } tr{ background: blue; }" />
tdCssObj	This sets the css in 'object' format for both calendar's date tds, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element	object	<Calendar tdCssObj = {{backgroundColor:'white',fontSize: '14px'}} />
onHoverTdCssObj	This sets the css in 'object' format for both calendar's date tds those get hovered, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element	object	<Calendar onHoverTdCssObj = {{backgroundColor:'yellow',fontSize: '14px',color:'brown'}} />
inRangedTdCssObj	This sets the css in 'object' format for both calendar's date tds those comes in range after start date, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element	object	<Calendar inRangedTdCssObj = {{backgroundColor:'green',fontSize: '14px',color:'white'}} />
startDateTdCssObj	This sets the css in 'object' format for both calendar's date td that is the start date, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element	object	<Calendar startDateTdCssObj = {{backgroundColor:'grey',fontSize: '14px',color:'black'}} />
endDateTdCssObj	This sets the css in 'object' format for both calendar's date td that is the end date, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element	object	<Calendar endDateTdCssObj = {{backgroundColor:'grey',fontSize: '14px',color:'black'}} />
disabledDatesTdCssObj	This sets the css in 'object' format for both calendar's date td that is the end date, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element	object	<Calendar disabledDatesTdCssObj = {{backgroundColor:'red',fontSize: '14px',color:'black',opacity:'0.2'}} />

Info :

Disabled dates will not be highlighted even if they get selected , by the selectedRange prop of the component.

Contributing

Pull requests are welcome