如何触发React Big Calendar中日显示事件数量的变更？

React Big Calendar（RBC）的单日事件显示数量是基于容器初始高度计算的，内部会缓存这个结果，普通重渲染或修改事件数组不会触发重新计算。以下是几个可行的解决方法：

1. 通过Ref调用内部measure方法 #

RBC的Calendar组件实例提供了measure方法，专门用来重新计算容器尺寸和事件布局。你可以通过React Ref获取组件实例，在高度修改后手动调用这个方法：

import { useRef, useState } from 'react';
import { Calendar } from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const MyCustomCalendar = () => {
  const calendarRef = useRef(null);
  const [events] = useState([
    { title: '事件1', start: new Date(), end: new Date() },
    { title: '事件2', start: new Date(), end: new Date() },
    // 更多测试事件...
  ]);

  const adjustCalendarHeight = () => {
    const calendarContainer = document.getElementById('rbc-container');
    // 切换容器高度
    calendarContainer.style.height = calendarContainer.style.height === '500px' ? '1000px' : '500px';
    // 调用measure触发重新计算
    if (calendarRef.current) {
      calendarRef.current.measure();
    }
  };

  return (
    <div>
      <button onClick={adjustCalendarHeight}>切换日历高度</button>
      <div id="rbc-container" style={{ height: '500px' }}>
        <Calendar ref={calendarRef} events={events} />
      </div>
    </div>
  );
};

export default MyCustomCalendar;

2. 用ResizeObserver监听容器尺寸变化 #

如果日历高度是响应式变化（比如窗口缩放、父容器尺寸改变），可以用ResizeObserver自动监听容器尺寸，变化时触发measure：

import { useRef, useState, useEffect } from 'react';
import { Calendar } from 'react-big-calendar';

const MyResponsiveCalendar = () => {
  const calendarRef = useRef(null);
  const [events] = useState([/* 你的事件数据 */]);

  useEffect(() => {
    const container = document.getElementById('rbc-container');
    if (!container) return;

    const resizeObserver = new ResizeObserver(() => {
      if (calendarRef.current) {
        calendarRef.current.measure();
      }
    });

    resizeObserver.observe(container);
    return () => resizeObserver.disconnect();
  }, []);

  return (
    <div id="rbc-container" style={{ height: '500px', border: '1px solid #ccc' }}>
      <Calendar ref={calendarRef} events={events} />
    </div>
  );
};

3. 结合React状态控制高度（更可靠） #

避免直接修改DOM样式，而是用React状态管理日历高度，状态变化时触发重渲染并调用measure：

import { useRef, useState, useEffect } from 'react';
import { Calendar } from 'react-big-calendar';

const MyStatefulCalendar = () => {
  const calendarRef = useRef(null);
  const [calendarHeight, setCalendarHeight] = useState('500px');
  const [events] = useState([/* 你的事件数据 */]);

  // 监听高度状态变化，触发重新计算
  useEffect(() => {
    if (calendarRef.current) {
      // 加0延迟确保DOM已更新完成
      setTimeout(() => calendarRef.current.measure(), 0);
    }
  }, [calendarHeight]);

  return (
    <div>
      <button onClick={() => setCalendarHeight(prev => prev === '500px' ? '1000px' : '500px')}>
        切换高度
      </button>
      <div style={{ height: calendarHeight }}>
        <Calendar ref={calendarRef} events={events} />
      </div>
    </div>
  );
};

核心原理 #

RBC内部会缓存容器的初始尺寸计算结果，只有调用measure方法时才会重新读取容器当前尺寸，重新计算单日可显示的事件数量、事件布局等参数。普通的重渲染（比如修改events、非尺寸相关的props）不会触发这个重新测量流程。

内容的提问来源于stack exchange，提问作者Michele Grisafi