Support for mounting a custom "Show More" popup at a particular cell

[tymefighter]

Clear and concise description of the problem

I am using big calendar in my application, and I need to show a popup which appears on clicking the "Show More" button. But, this popup is very different from the one currently rendered by big calendar, hence I need to implement my custom popup instead of using the built-in one.

The issue I am facing is that the current contract of the calendar component has this onShowMore callback and this messages configuration function, both of these do not provide enough information for me to mount my popup at the cell in which the "Show More" was clicked.

1. The issue with onShowMore: onShowMore provided me with the events and the date of the cell in which the "Show More" button was clicked. But it doesn't provide me with the target HTML element of the "Show More" button. Hence, I am not able to mount my popup at that specific cell.

2. The issue with messages: The showMore property on messages allows me to render custom JSX (if I ignore the string output type). Here I could technically render my own button, and manage my own click handlers. This would provide me with my target element for mounting my popup. But, here the issue is that I don't have access to the events and date of that particular cell, hence I won't be able to show the relevant information in my popup.

Neither of the above two props provide me with enough information to render my popup while mounting it at the cell in which "Show More" was clicked.

Suggested solution

I suggest that we add support for target argument as well in the onShowMore callback. The updated function would look like this:

function (events: Array[event: Object], date: Date, target: HTMLElement) => any

I could then just use the events and date information to render my custom popup, while being mounted at target HTML element.

Alternative

No response

Additional context

I have read this issue - #1147. But it doesn't solve my problem. The fix which was raised for this issue only allows me to render my own popup, but does not allow me to mount it at a specific cell.

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[qjinle]

I also need this feature

[b9shal]

This would be nice.

[FerShihab]

yeah it is good advice, that will be a good feature

[sahilshah668]

@tymefighter Do you find any work around for this - like a wrapper function or dynamic positioning?

[github-actions]

🎉 This issue has been resolved in version 1.15.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀