feat(components): showMore component customization

[davidmh]

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

This new component adds the following props:

• localizer
• slot
• slotDate
• count
• events
• remainingEvents

I can also update the types once this gets merged.

Resolves #2391

---

I tried reaching out through the Slack community first, but the invitation link has expired, could you post a new link?

[davidmh]

I passed the props in the action hoping to visualize the values in the actions panel, but the panel is not showing any actions at the moment, is it broken?

[cutterbl]

@davidmh Our Storybook implementation is out of date with current Storybook. I just haven't had the time to work the upgrade.

[cutterbl]

@davidmh Since the 'action' isn't coming through, I would suggest putting the info in the console and flashing an alert to 'check your console'.

[davidmh]

The getDateForSlot access the slots range, and array, using the slot as the index. But the slot received in this method are not zero-based, which means, we need to adjust for the expected zero-based index used to pull from the range:

react-big-calendar/src/utils/DateSlotMetrics.js

Lines 38 to 40 in 12d81f0

	getDateForSlot(slotNumber) {
	return range[slotNumber]
	},

[cutterbl]

@davidmh Looks like a good catch to me. This code was long before my time on the project, and I can see where it would have been easily missed.

[davidmh]

I started looking into the index issue with the slots, but that ends up breaking a bunch of other features, so I'll just leave it as it is.

I added a few more events in the story to make sure the custom component behaves as expected on the first day of a row.

[FerShihab]

is there any update for this feature? @davidmh

[davidmh]

@FerShihab still waiting for a review. @cutterbl could you take a look?

If it helps, I've been using it through a fork: https://www.npmjs.com/package/@davidmh/react-big-calendar

[cutterbl]

@davidmh Just seeing this (busy times). If you could resolve the branch conflicts, then I can take a look

[davidmh]

@cutterbl done, I'm also interested in hearing your opinion on that comment about the getDateForSlot method.

[davidmh]

Thanks for the review @cutterbl, I'll address the feedback later this week, I'll try to create a separate PR to fix the issue with getDateForSlot and rebase this branch on top of that fix. Just to avoid mixing fixes and features. I ended up not changing the slot logic, as it breaks other features.

[cutterbl]

@davidmh Thanks for pulling in latest changes. One last bit I see is you need to update the components story to include showMore override ability.

[davidmh]

Done

[github-actions]

🎉 This PR is included in version 1.15.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀