React Big Calendar视图不显示：设置views为['day']出现空按钮求助

核心问题 #

你写的views="{['day']}"是错误的——把JavaScript表达式用双引号包裹后，它会被当成字符串传递，而非数组。Big Calendar无法识别这个字符串格式的参数，因此渲染出了无效的空切换按钮。

修复步骤 #

1. 修正views属性写法 #

去掉双引号，直接传递数组：

<DnDCalendar
  viewType="Resources"
  localizer={localizer}
  events={events}
  startAccessor="start"
  views={['day']} // 移除双引号，直接传递数组
  endAccessor="end"
  defaultDate={visibleDate}
  draggableAccessor={(event) => true}
  onEventDrop={onEventDrop}
  resourceIdAccessor="resourceId"
  resources={resources}
  resourceTitleAccessor="resourceTitle"
/>

2. 自定义视图基础配置（针对你的后续需求） #

如果要添加自定义视图，需要先定义视图组件，再在views中配置：

// 自定义日视图组件示例
const CustomDayView = ({ events, resources, ...props }) => {
  return (
    <div className="custom-day-view">
      {/* 这里写你的自定义渲染逻辑 */}
    </div>
  );
};

// 在日历组件中配置
<DnDCalendar
  // 保留其他原有属性
  views={{
    day: CustomDayView, // 替换默认日视图为自定义组件
    // 可添加更多自定义视图，比如 myCustomView: MyCustomView
  }}
  view="day" // 指定默认显示的视图
/>

额外注意 #

由于你使用了viewType="Resources"（资源视图模式），请确保resources数组格式正确，每个资源对象必须包含resourceId和resourceTitle字段，避免视图渲染异常。

内容的提问来源于stack exchange，提问作者Anastasia Sitnina