如何在React JS的FullCalendar指定日期中添加查看图标按钮？

核心思路是利用FullCalendar提供的dayCellContent回调函数自定义日期单元格内容，对比当前日期与你的特定数据，匹配时插入查看按钮。

具体实现步骤 #

1. 确保依赖安装 #

如果还没装FullCalendar相关包，先执行：

npm install @fullcalendar/react @fullcalendar/daygrid

2. 编写组件代码 #

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

// 这里替换成你实际的特定日期数据，格式可以自己调整
const targetDates = [
  '2024-05-15',
  '2024-05-20',
  '2024-05-25'
];

const CalendarWithViewButtons = () => {
  // 按钮点击后的业务逻辑，按需修改
  const handleViewClick = (date) => {
    console.log(`点击了${date}的查看按钮`);
    // 比如打开详情弹窗、跳转至对应页面等
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      // 自定义日期单元格的渲染内容
      dayCellContent={({ date, dayNumberText }) => {
        // 把日期转成YYYY-MM-DD格式，和你的数据格式统一
        const currentDateStr = date.toISOString().split('T')[0];
        // 判断当前日期是否在目标列表里
        const needButton = targetDates.includes(currentDateStr);

        return (
          <div style={{ position: 'relative', padding: '8px' }}>
            {/* 保留原有的日期数字 */}
            <span>{dayNumberText}</span>
            {/* 符合条件就渲染查看按钮 */}
            {needButton && (
              <button
                style={{
                  position: 'absolute',
                  bottom: '2px',
                  right: '2px',
                  fontSize: '10px',
                  padding: '2px 5px',
                  backgroundColor: '#2196F3',
                  color: '#fff',
                  border: 'none',
                  borderRadius: '3px',
                  cursor: 'pointer'
                }}
                onClick={() => handleViewClick(currentDateStr)}
              >
                查看
              </button>
            )}
          </div>
        );
      }}
    />
  );
};

export default CalendarWithViewButtons;

3. 适配复杂数据场景 #

如果你的特定数据是带额外信息的对象数组（比如包含日期和详情ID），只需要调整判断逻辑：

// 示例：带详情ID的目标数据
const targetDates = [
  { date: '2024-05-15', detailId: 101 },
  { date: '2024-05-20', detailId: 102 }
];

// 在dayCellContent里修改判断逻辑
const matchedData = targetDates.find(item => item.date === currentDateStr);
if (matchedData) {
  // 渲染按钮时可以把detailId传进点击事件
  <button onClick={() => handleViewClick(matchedData.detailId)}>查看</button>
}

内容的提问来源于stack exchange，提问作者Aayush Dura