Pass the Day instance as parameter of the onPickDate callback

[AlexGeb]

Hello, thanks for sharing this great calendar !

I would like to know if it was possible to pass the clicked Day instance as param of the onPickDate callback.
I need to show a popup above the clicked day and so I need a ref to the Day instance which was clicked for positioning.

Thanks a lot !

(I'm forking your project to see if I can implement something useful )

[AlexGeb]

Found a solution myself :

I've added a ref to the outer element of the Day component :
<td onClick={this.onClick} onMouseEnter={this.onHover} className={classes} ref={dayElement => { this.dayElement = dayElement;}}>

Then I pass it to the onClick callback :
onClick() { const { dayClicked, day } = this.props; dayClicked(day, this.dayElement); // this.dayElement = ref to the <td> element, for further action on it }

I use it that way :
<Calendar onPickDate={this.datePicked(date, classes, dayElement)} />

and I can access to the position of the clicked day by calling getBoundingClientRect() on dayElement.

Observation : The classes parameter becomes irrelevant because we can access to the classes using the dayElement parameter.

[SagiSan]

@AlexGeb could you explain how did you add the ref to the outer element of the Day component. And can you show your example please?

[GiovanniFrigo]

Honestly I'm not a big fan of passing a Day reference to the onPickDate callback, as I'm not sure is good performance-wise.
I'll look into some alternatives, if any, and let you know!

[AlexGeb]

@SagiSan, you can set the ref props of any element to a function which takes a ref to the element as input :
<td ref={dayElement => { this.dayElement = dayElement;}}/>
At each render, the dayElement attribute of your component will be set, and then you can use it anywhere in your components methods (apart from the lifecycle hook methods that occur before first mounting).

@GiovanniFrigo I totally agree with you, I did it because I needed to position a popup and it was the first idea that came up.

Another idea is to add a props to the Calendar component, such as dayClickedPopup, which has to be set as a component, propagate this props down the tree and display it at a Day level, as soon as it is clicked or hovered.
I'm rather new to React so feel free to tell if it is a bad idea..