在React的fullCalendar中展示盈亏(PL)数据并实现合并与着色

步骤1：预处理原始数据，按日期汇总盈亏值 #

首先把原始数据中相同日期的pl值累加，得到每个日期的总盈亏：

const data = [
  { start: "2023-03-02", pl: 2 },
  { start: "2023-03-02", pl: -3 },
  { start: "2023-03-07", pl: 1 }
];

// 按日期汇总PL值
const aggregatedData = data.reduce((acc, item) => {
  const dateKey = item.start;
  // 若当前日期已存在则累加PL，否则初始化
  if (!acc[dateKey]) {
    acc[dateKey] = { start: dateKey, pl: 0 };
  }
  acc[dateKey].pl += item.pl;
  return acc;
}, {});

// 转换为数组格式，方便后续查找
const aggregatedArray = Object.values(aggregatedData);

步骤2：配置FullCalendar组件，实现自定义显示与样式 #

需要引入@fullcalendar/react和@fullcalendar/daygrid插件，通过两个核心回调实现需求：

• dayCellContent：在日期单元格内显示汇总后的盈亏值
• dayCellClassNames：根据盈亏值判断是否给日期单元格添加红色背景类名

完整组件代码：

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import './Calendar.css'; // 引入样式文件

const ProfitLossCalendar = () => {
  const data = [
    { start: "2023-03-02", pl: 2 },
    { start: "2023-03-02", pl: -3 },
    { start: "2023-03-07", pl: 1 }
  ];

  // 汇总日期盈亏
  const aggregatedData = data.reduce((acc, item) => {
    const dateKey = item.start;
    if (!acc[dateKey]) {
      acc[dateKey] = { start: dateKey, pl: 0 };
    }
    acc[dateKey].pl += item.pl;
    return acc;
  }, {});
  const aggregatedArray = Object.values(aggregatedData);

  // 判断日期是否需要红色背景
  const getDayCellClassNames = (info) => {
    const targetEntry = aggregatedArray.find(item => item.start === info.dateStr);
    return targetEntry?.pl < 0 ? 'negative-pl-bg' : '';
  };

  // 渲染日期单元格内的盈亏值
  const renderDayCellContent = (info) => {
    const targetEntry = aggregatedArray.find(item => item.start === info.dateStr);
    return targetEntry ? <span>{targetEntry.pl}</span> : null;
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      dayCellClassNames={getDayCellClassNames}
      dayCellContent={renderDayCellContent}
      headerToolbar={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay'
      }}
    />
  );
};

export default ProfitLossCalendar;

步骤3：添加CSS样式，设置负数日期背景 #

在Calendar.css中定义红色背景的样式：

.negative-pl-bg {
  background-color: #ff6b6b !important; /* 自定义红色背景，可根据需求调整色调 */
  color: white; /* 可选：设置文字颜色为白色，提升可读性 */
}

关键说明 #

• 数据汇总使用Array.reduce高效合并相同日期的盈亏值，避免重复计算
• dayCellClassNames回调会针对每个日期单元格触发，通过info.dateStr匹配汇总数据，返回对应的样式类名
• dayCellContent回调用于自定义日期单元格内的显示内容，把汇总后的盈亏值渲染到单元格中

内容的提问来源于stack exchange，提问作者tanjona Randrianasolo