Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
tymefighter opened this issue Apr 9, 2023 · 1 comment · May be fixed by #2537
Open
3 tasks done

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

tymefighter opened this issue Apr 9, 2023 · 1 comment · May be fixed by #2537

Comments

@tymefighter
Copy link

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.

image

  1. 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.

image

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
Copy link

qjinle commented Jul 3, 2023

I also need this feature

davidmh added a commit to davidmh/react-big-calendar that referenced this issue Mar 13, 2024
I'm trying to render a custom component for the `show more` button. I
know there are a few recommended ways to do this through the `onShowMore`
callback and the `messages.showMore` prop as suggested in jquense#1147.

But that doesn't cover all use cases. For example, I want to access the
events that are being hidden by the `show more` button. I also want to
render a custom popup right next to the `show more` button.

Resolves jquense#2391
@davidmh davidmh linked a pull request Mar 13, 2024 that will close this issue
davidmh added a commit to davidmh/react-big-calendar that referenced this issue Mar 14, 2024
I'm trying to render a custom component for the `show more` button. I
know there are a few recommended ways to do this through the `onShowMore`
callback and the `messages.showMore` prop as suggested in jquense#1147.

But that doesn't cover all use cases. For example, I want to access the
events that are being hidden by the `show more` button. I also want to
render a custom popup right next to the `show more` button.

Resolves jquense#2391
davidmh added a commit to davidmh/react-big-calendar that referenced this issue Mar 14, 2024
I'm trying to render a custom component for the `show more` button. I
know there are a few recommended ways to do this through the `onShowMore`
callback and the `messages.showMore` prop as suggested in jquense#1147.

But that doesn't cover all use cases. For example, I want to access the
events that are being hidden by the `show more` button. I also want to
render a custom popup right next to the `show more` button.

Resolves jquense#2391
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants