如何将Firestore数据映射至单个react-big-calendar日历？

你的问题核心是循环渲染了多个Calendar组件——在Courses2.map里，每个Firestore文档都对应生成一个独立的Calendar，每个日历只绑定单个事件，所以出现一排独立日历。

要实现所有事件显示在同一个日历里，只需两步修改：

1. 把Firestore数据直接转换成日历事件格式 #

在获取Firestore数据时，直接将每个文档映射为符合react-big-calendar要求的事件对象，而不是保留原有的data嵌套结构：

function getCourses2() {
  const courseCollectionRef = collection(Firestoredb, collectionId2)
  const q = query(courseCollectionRef, where('facilitator', '==', ''))
  getDocs(q)
  .then(response => {
    // 直接映射为事件数组
    const events = response.docs.map(doc => {
      const docData = doc.data();
      return {
        id: doc.id,
        title: docData.schoolName,
        allDay: false,
        start: new Date(docData.visitDate),
        end: new Date(docData.visitDate),
      };
    })
    setCourses2(events)
  })
  .catch(error => console.log(error.message))
}

2. 只渲染一次Calendar组件，传入完整事件数组 #

移除原来的<ul>和循环渲染多个Calendar的代码，只保留一个Calendar组件，将转换好的事件数组传给events属性：

return (
  <div>
    calendar2
    <br/>
    <Calendar
      localizer={localizer}
      events={Courses2}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

完整修改后的代码 #

import React, { useEffect, useState } from 'react';
import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Firestoredb } from '../../../../../firebase';
import { collection, getDocs, query, where } from 'firebase/firestore';
import format from "date-fns/format";
import getDay from "date-fns/getDay";
import parse from "date-fns/parse";
import startOfWeek from "date-fns/startOfWeek";

export default function Calendar2() {
    const locales = {
      "en-US": require("date-fns/locale/en-US"),
    };
    const localizer = dateFnsLocalizer({
      format,
      parse,
      startOfWeek,
      getDay,
      locales,
    });

    const [collectionId2, setCollectionId2] = useState('Primary School Bookings')
    const [courses2, setCourses2] = useState([]); // 变量名采用小驼峰更规范

    useEffect(() => {
      getCourses2()
    }, [])
  
    useEffect(() =>{
      console.log(courses2)
    }, [courses2]) 
  
    function getCourses2() {
      const courseCollectionRef = collection(Firestoredb, collectionId2)
      const q = query(courseCollectionRef, where('facilitator', '==', ''))
      getDocs(q)
      .then(response => {
        const events = response.docs.map(doc => {
          const docData = doc.data();
          return {
            id: doc.id,
            title: docData.schoolName,
            allDay: false,
            start: new Date(docData.visitDate),
            end: new Date(docData.visitDate),
          };
        })
        setCourses2(events)
      })
      .catch(error => console.log(error.message))
    }

  return (
    <div>
      calendar2
      <br/>
      <Calendar
        localizer={localizer}
        events={courses2}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
      />
    </div>
  )
}

注意：如果visitDate在Firestore中不是标准日期格式，可能需要额外处理日期转换，确保new Date()能正确解析。

内容的提问来源于stack exchange，提问作者Peter Bonnebaigt