React Big Calendar如何设置15分钟时段及默认15分钟事件？

安全阿岳

2026-6-16

解决react-big-calendar 15分钟时段及事件添加问题

正确配置时段显示

要实现左侧时段每15分钟显示一次（9:00、9:15、9:30、9:45...），需同时配置step和timeslots参数，且确保使用日/周这类支持小时细分的视图：

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';

const localizer = momentLocalizer(moment);

const calendarProps = {
  localizer,
  step: 15, // 单个时间间隔的分钟数
  timeslots: 4, // 每小时划分的时段数（60/15=4）
  views: ['day', 'week'], // 仅启用支持细分时段的视图
  // 其他必要配置（events、onSelectEvent等）
};

<Calendar {...calendarProps} />

之前出现的“08:00AM下含4个时段直接到10:00AM”问题，大概率是未正确配置本地化工具（如moment），或切换到了不支持细分时段的月视图。确认使用本地化工具并切换到日/周视图即可正常显示15分钟间隔的时段。

点击单元格添加15分钟事件

默认onSelectSlot会生成30分钟事件，需自定义该函数强制设置15分钟时长：

const handleSelectSlot = ({ start }) => {
  // 手动将结束时间设为开始时间+15分钟
  const newEnd = new Date(start.getTime() + 15 * 60 * 1000);
  // 事件创建逻辑，示例：更新组件events状态
  const newEvent = {
    title: '新事件',
    start,
    end: newEnd,
    id: Date.now(),
  };
  setEvents(prev => [...prev, newEvent]);
};

// 传入Calendar组件
<Calendar
  {...calendarProps}
  onSelectSlot={handleSelectSlot}
  selectable // 必须开启才能点击单元格触发事件创建
/>

这样点击任意15分钟单元格时，都会生成一个时长恰好15分钟、起止时间对齐15分钟节点的事件。