React.js调度应用：如何实现日程按日期分组渲染？

要实现按日期分组展示日程，你需要先对原始日程数据做分组+排序处理，再分层渲染日期标题和对应日程，具体实现如下：

核心步骤 #

• 1. 按日期分组：使用Array.reduce将同一天的日程归为一组，用格式化后的日期字符串作为分组键
• 2. 日期排序：对分组后的日期键进行排序，确保按时间先后顺序展示
• 3. 分层渲染：先渲染每个日期的标题，再渲染该日期下的所有日程项

修改后的完整代码 #

import React from 'react'
import ReactDOM from 'react-dom'
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
import moment from 'moment'

function App() {
  let rawSchedule = [
    {
      scheduleDate: '2023-09-18T14:00:00.000Z',
      recipient: {
        id: '2',
        fullName: 'Barry Saunders',
      },
    },
    {
      scheduleDate: '2023-09-18T16:00:00.000Z',
      recipient: {
        id: '2',
        fullName: 'Barry Saunders',
      },
    },
    {
      scheduleDate: '2023-09-15T14:00:00.000Z',
      recipient: {
        id: '6',
        fullName: 'Aaron Williams',
      },
    },
  ]

  // 1. 按日期分组：将同一天的日程归为一组
  const groupedSchedules = rawSchedule.reduce((groups, item) => {
    // 生成日期键（用YYYY-MM-DD确保同一天的日程被分到一组）
    const dateKey = moment(item.scheduleDate).format('YYYY-MM-DD')
    // 生成用于展示的日期格式
    const displayDate = moment(item.scheduleDate).format('DD MMM YYYY')
    if (!groups[dateKey]) {
      groups[dateKey] = {
        displayDate,
        items: []
      }
    }
    groups[dateKey].items.push(item)
    return groups
  }, {})

  // 2. 对日期键进行排序，按时间从早到晚（如需倒序可调整排序逻辑）
  const sortedDateKeys = Object.keys(groupedSchedules).sort((a, b) => new Date(a) - new Date(b))

  return (
    <>
      <h5>
        <CalendarMonthIcon /> Calendar
      </h5>
      <div>
        {/* 3. 分层渲染：先渲染日期标题，再渲染对应日程 */}
        {sortedDateKeys.map(dateKey => {
          const group = groupedSchedules[dateKey]
          return (
            <div key={dateKey} style={{ marginBottom: '1rem' }}>
              {/* 日期标题 */}
              <h6>{group.displayDate}</h6>
              {/* 该日期下的日程列表 */}
              <ul>
                {group.items.map((item, i) => (
                  <li key={i}>
                    {item.recipient.fullName} {moment(item.scheduleDate).format('HH:mm')}
                  </li>
                ))}
              </ul>
            </div>
          )
        })}
      </div>
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

关键说明 #

• 分组时用YYYY-MM-DD作为键，避免因展示格式的字符串排序问题，确保分组准确
• 排序时直接通过日期字符串转Date对象比较，保证时间顺序正确
• 渲染时拆分了日期标题和日程列表，实现目标中的分组展示效果

内容的提问来源于stack exchange，提问作者The Old County