feat(react-big-calendar): showMore component

The library now accepts a `showMore` custom component to provide access to the events overflowing the available cell space. See: jquense/react-big-calendar#2537
davidmh · Oct 9, 2024 · a24f55d · a24f55d
1 parent ca02214
commit a24f55d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/types/react-big-calendar/index.d.ts b/types/react-big-calendar/index.d.ts
@@ -188,6 +188,15 @@ export interface DateCellWrapperProps {
     children: React.JSX.Element;
 }
 
+export interface ShowMoreProps<TEvent extends object = Event> {
+    localizer: DateLocalizer;
+    slot: number;
+    slotDate: Date;
+    count: number;
+    events: TEvent[];
+    remainingEvents: TEvent[];
+}
+
 export interface Components<TEvent extends object = Event, TResource extends object = object> {
     event?: React.ComponentType<EventProps<TEvent>> | undefined;
     eventWrapper?: React.ComponentType<EventWrapperProps<TEvent>> | undefined;
@@ -235,6 +244,7 @@ export interface Components<TEvent extends object = Event, TResource extends obj
      */
     header?: React.ComponentType<HeaderProps> | undefined;
     resourceHeader?: React.ComponentType<ResourceHeaderProps<TResource>> | undefined;
+    showMore?: React.ComponentType<ShowMoreProps<TEvent>>;
 }
 
 export interface ToolbarProps<TEvent extends object = Event, TResource extends object = object> {

diff --git a/types/react-big-calendar/package.json b/types/react-big-calendar/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@types/react-big-calendar",
-    "version": "1.8.9999",
+    "version": "1.15.9999",
     "projects": [
         "https://github.com/jquense/react-big-calendar"
     ],

diff --git a/types/react-big-calendar/react-big-calendar-tests.tsx b/types/react-big-calendar/react-big-calendar-tests.tsx
@@ -19,6 +19,7 @@ import {
     Navigate,
     NavigateAction,
     ResourceHeaderProps,
+    ShowMoreProps,
     stringOrDate,
     TimeGrid,
     ToolbarProps,
@@ -368,6 +369,7 @@ class CalendarResource {
                         eventWrapper: EventWrapper,
                         header: CustomHeader,
                         resourceHeader: ResourceHeader,
+                        showMore: ShowMoreButton,
                     }}
                     dayPropGetter={customDayPropGetter}
                     slotPropGetter={customSlotPropGetter}
@@ -533,6 +535,16 @@ function ResourceHeader(props: ResourceHeaderProps<CalendarResource>) {
     );
 }
 
+function ShowMoreButton(props: ShowMoreProps<CalendarEvent>) {
+    return (
+        <div>
+            <div>Show more</div>
+            <p>All events: {props.events.length}</p>
+            <p>Remaining: {props.remainingEvents.length}</p>
+        </div>
+    );
+}
+
 class Toolbar extends React.Component<ToolbarProps<CalendarEvent, CalendarResource>> {
     render() {
         const { date, label, view } = this.props;