我在一个目前正在做的项目中发现了一种非常古怪的方法。
x1c 0d1x的数据
基本上：

• 按dateTime减少事件（仅用于周视图）。
• 覆盖eventWrapper以添加“显示更多”小部件

以下是示例代码片段：

const eventList =
  view === Views.MONTH
    ? mapEventsForBigCalendar(scheduledPosts, timeZone)
    : weekEventsReducer(scheduledPosts, timeZone);

return (
  <BigCalendar
    events={eventList}
    components={{
      components={{
      eventWrapper: CalendarEvent, // The event plus the Show More widget
      week: {
        event: WeekEvent,
      },
      month: {
        event: MonthEvent,
      },
    }}
  ...
  />
)

字符串
reduce函数基本上会丢弃同一日期/时间内的事件。

function mapEventForBigCalendar(timezone: TimeZone) {
  return (event: ScheduledPost) => ({
    id: event.id,
    start: changeTimeZone(event.startTime, timezone),
    end: changeTimeZone(event.endTime, timezone),
    resource: {
      post: event.post,
      sameDateTimeEvents: [], // needed to add Show More functionality to week view. Big Calendar doesn't support that out of the box
    },
  });
}

export function mapEventsForBigCalendar(events: ScheduledPost[] = [], timezone: TimeZone): BigCalendarEvent[] {
  return events.map(mapEventForBigCalendar(timezone));
}

export function weekEventsReducer(events: ScheduledPost[] = [], timezone: TimeZone): BigCalendarEvent[] {
  const emptyMap = new Map<string, BigCalendarEvent>();
  const map = mapEventForBigCalendar(timezone);

  const eventsByDateTime = events.reduce((slotEvents, anotherEvent: ScheduledPost) => {
    const groupKey = format(anotherEvent.startTime, 'M-d-hh-a');
    const existingEvent = slotEvents.get(groupKey);

    if (existingEvent) {
      existingEvent.resource.sameDateTimeEvents.push(map(anotherEvent));
      slotEvents.set(groupKey, existingEvent);
    } else {
      slotEvents.set(groupKey, map(anotherEvent));
    }

    return slotEvents;
  }, emptyMap);

  return Array.from(eventsByDateTime.values());
}

型
现在你已经将事件分组（实际上丢弃了一些并为主事件添加了一个计数器），你可以根据需要呈现它们。你将使用与WeekEvent组件中使用的相同的JSX代码，但这一次它将被 Package 在一个容器中，该容器还附加了“显示更多”小部件。

const CalendarEvent = ({ children, style, type, event: calendarEvent }) => {
  const isMonthView = type === 'date';
  if (isMonthView) return children;

  const mediaCount = calendarEvent.resource.post?.mediaCount();

  const sameDateTimeEventsCount = calendarEvent.resource.sameDateTimeEvents.length ?? 0;

  const ShowMore = (
    <button
      key={`${calendarEvent.id}-see-more`}
      className="rbc-button-link rbc-show-more"
      onClick={(e) => {
        e.preventDefault();

        // onShowMore(e, calendarEvent); // You can pass this callback by currying the eventWrapper component
      }}>
      <Typography component="span" whiteSpace="nowrap" variant="subtitle2" fontWeight={600}>
        {`+ ${sameDateTimeEventsCount}`}
      </Typography>
      <Typography component="span" variant="subtitle2" fontWeight={600}>
        MORE
      </Typography>
    </button>
  );

  return (
    <div className="rbc-event" style={style}>
      <div className="rbc-event-week">
        {/* <div className="rbc-event-label">...</div> */}
        <div className="rbc-event-content">
          <EventPill mediaCount={mediaCount} event={calendarEvent} />
        </div>
      </div>
      {sameDateTimeEventsCount && ShowMore}
    </div>
  );
};

型
让我向您展示“currying”eventWrapper所缺少的部分，以便您可以提供回调。

const WithCallback = ({ onShowMore }: WithCallbackProps) => {
  const CalendarEvent = ({ children, type, event: calendarEvent }) => {
  ...
  return CalendarEvent;
};

export default WithCallback;

型
然后像这样使用它：

eventWrapper: CalendarEvent({
  onShowMore: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, calendarEvent: BigCalendarEvent) => {
    setShowMorePopupPosition({ left: e.clientX - 95, top: e.clientY });

    // whatever state handler you are using to populate the popup
    onShowMore(calendarEvent.resource.sameDateTimeEvents, calendarEvent.start);
  },
}),

型

的

React-Big-Calendar通过弹出窗口而不是内联来处理这个问题。他们在文档中有一个例子。