search

clauderic / react-infinite-calendar

✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
http://clauderic.github.io/react-infinite-calendar/
MIT License
3.98k stars 403 forks source link

Calendar does not renrer dates #172

Open futbolistua opened 6 years ago

futbolistua commented 6 years ago

I use Range Selection and calendar does not render dates till scrolling if it has more than one available month <InfiniteCalendar Component={withRange(Calendar)} width={300} height={240} rowHeight={48} displayOptions={{ showHeader: false, showTodayHelper: false, }} onSelect={this.handleDateChange}/>

12 123

futbolistua commented 6 years ago

Any comments, updates?

hoaiduyit commented 6 years ago

I have this issue too

theonlydaleking commented 6 years ago

Was running into this issue before, there is another issue where the author suggested hiding and unhiding the calendar with something like this:

<div style={{display: this.state.visible ? 'block': 'none'}}> <InfiniteCalendar />

however when you render the calendar after changing display to block then the child elements aren't rendered.

i got around this by using:

{this.state.visible && <InfiniteCalendar />}

and handling this.visibile in state by having a function that calls this.setState({visible: !this.state.visible}) whenever i want to toggle it

To handle clicking outside the calendar to close i used the package react-onclickoutside then you just export your component as

export default onClickOutside(YourComponent)

hope this helps some people