React-Big-Calendar日视图事件展示顺序自定义需求咨询

嗨，我完全get到你的需求啦——想在React-Big-Calendar的日视图里，先显示事件标题，再跟上开始和结束时间，但目前的展示顺序是时间在前、标题在后，对吧？别担心，咱们只需要调整你自定义的CustomEvent组件就行，具体改法如下：

首先，你原来的CustomEvent只渲染了事件标题，现在我们把它改成先渲染标题，再格式化并渲染开始/结束时间：

const CustomEvent = ({ event }) => {
  // 格式化时间，这里用原生方法提取时分部分，你可以根据需求调整格式细节
  const formatTime = (date) => date.toLocaleTimeString([], { 
    hour: '2-digit', 
    minute: '2-digit' 
  });

  return (
    <div style={{ lineHeight: '1.4', padding: '2px 4px' }}>
      {/* 先展示事件标题，可根据需求加样式突出 */}
      <div style={{ fontWeight: 'bold' }}>{event?.title}</div>
      {/* 再展示格式化后的开始-结束时间 */}
      <div style={{ fontSize: '0.9em', color: '#666' }}>
        {formatTime(event.start)} - {formatTime(event.end)}
      </div>
    </div>
  );
};

你的Calendar组件其他配置完全不用动——因为你已经通过components={{ event: CustomEvent }}把默认事件组件替换成了咱们自定义的版本，修改后日视图里的事件就会按照「标题在前、时间在后」的顺序展示啦。

要是你需要更复杂的时间格式（比如显示日期、时区），也可以换成date-fns这类工具库来格式化时间，核心逻辑都是先渲染标题再渲染时间哦～

内容来源于stack exchange