如何自定义Full Calendar中单个日历项的UI显示？

我希望修改Full Calendar中每个日历项的渲染方式，是否有可行的实现方案？我已使用renderCellContents更新了整体日历日期单元格，但单个日历项的自定义实现存在困难。

当前技术栈：Next.js + TypeScript + MUI v4

可行实现方案 #

Full Calendar v5及以上版本提供了专门的API用于自定义单个日历项渲染，结合你的技术栈，推荐以下两种方式：

1. 用eventContent完全自定义日历项结构

这是官方推荐的自定义事件渲染方案，支持直接返回React组件，适配MUI生态：

• 第一步：创建MUI风格的自定义事件组件

import { Chip, Tooltip } from '@material-ui/core';
import { EventApi } from '@fullcalendar/core';

type CustomEventProps = {
  event: EventApi;
};

const CustomEventCard = ({ event }: CustomEventProps) => {
  return (
    <Tooltip title={event.extendedProps.description || event.title}>
      <Chip
        label={event.title}
        style={{
          backgroundColor: event.backgroundColor,
          color: '#fff',
          width: '100%',
          justifyContent: 'flex-start',
          padding: '0 4px',
        }}
      />
    </Tooltip>
  );
};

• 第二步：在Full Calendar配置中注册eventContent回调

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import ReactDOMServer from 'react-dom/server';

const CalendarComponent = () => {
  const renderCustomEvent = (info: any) => {
    // 部分版本支持直接返回React元素，若报错可改用renderToStaticMarkup
    return {
      domNodes: [ReactDOMServer.renderToStaticMarkup(<CustomEventCard event={info.event} />)]
    };
  };

  return (
    <FullCalendar
      plugins={[dayGridPlugin, interactionPlugin]}
      events={yourEventDataSource}
      eventContent={renderCustomEvent}
      renderCellContents={yourExistingCellRenderFunc}
    />
  );
};

2. 用eventClassNames自定义样式（轻量需求）

如果只是调整样式而非重写结构，可通过该回调给事件添加自定义类，结合MUI的样式方案实现：

import { makeStyles } from '@material-ui/core/styles';
import { EventApi } from '@fullcalendar/core';

const useStyles = makeStyles({
  customEvent: {
    borderRadius: '6px',
    padding: '3px 6px',
    backgroundColor: '#1976d2',
    border: 'none',
    color: '#fff',
  },
  urgentEvent: {
    backgroundColor: '#dc3545',
  },
});

const CalendarComponent = () => {
  const classes = useStyles();

  const getEventClasses = (info: { event: EventApi }) => {
    const baseClasses = [classes.customEvent];
    if (info.event.extendedProps.isUrgent) {
      baseClasses.push(classes.urgentEvent);
    }
    return baseClasses;
  };

  return (
    <FullCalendar
      // ...其他配置
      eventClassNames={getEventClasses}
    />
  );
};

注意事项 #

• 确保你的Full Calendar版本为v5+，eventContent是该版本新增API
• TypeScript环境下建议引入@fullcalendar/core的类型（如EventContentArg）规范参数类型
• 若需事件交互（点击、拖拽），可在自定义组件中绑定事件，结合Full Calendar的eventClick、eventDrop等钩子联动

内容的提问来源于stack exchange，提问作者Lakindu Hewawasam