如何让日历组件同时展示项目里程碑与房间预约事件？

你需要把两类事件的数组合并后再传给events属性——日历组件的events通常仅接受一个事件数组，你之前的写法错误在于没有正确合并两个数据源。

正确写法示例 #

方式1：使用扩展运算符（可读性更高，推荐）

events={[
  // 先将里程碑数据转换为日历要求的事件格式
  ...milestones.map(milestone => ({
    id: milestone.id,
    title: milestone.description,
    start: milestone.expectedDate
  })),
  // 合并房间预约数据（需确保预约数据结构符合日历事件要求）
  ...this.state.reservations
]}

方式2：使用数组concat方法

events={
  milestones.map(milestone => ({
    id: milestone.id,
    title: milestone.description,
    start: milestone.expectedDate
  })).concat(this.state.reservations)
}

之前写法无效的原因 #

• 写法一/二：仅传入单一数据源数组，自然只能显示一类事件。
• 写法三：用逗号分隔两个表达式时，JavaScript的逗号运算符会执行第一个表达式但返回第二个表达式的值，实际传给events的只有其中一类数据，因此无法同时展示两类事件。

注意事项 #

如果this.state.reservations中的数据结构和里程碑不同，需要先对预约数据做同样的映射转换，确保每个对象都包含日历组件要求的必要字段（如id、title、start），再合并数组。

内容的提问来源于stack exchange，提问作者Francisco Sousa