这叫啥 UI？
← 返回组件目录

COMPONENT 72 · Data Display

日历视图

Calendar View

也叫Month ViewSchedule Calendar月历NSCalendarView

以日、周或月网格展示日期及其事件。

Displays dates and events in a day, week, or month grid.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 日期标题
  • 时间网格
  • 事件项目

适合使用

  • 日期位置、冲突或时间分布是主要信息时。

不建议使用

  • 用户只需选一个日期，或事件更适合线性列表时。

键盘与无障碍

  • 提供列表替代视图；日期与事件有完整名称，网格键盘导航和焦点位置可预测。

DESCRIBE IT TO AI

这样告诉编程助手

实现日历视图（Calendar View）：以日、周或月网格展示日期及其事件。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<div class="demo stack">
  <table>
    <caption>2026 年 7 月</caption>
    <thead>
      <tr>
        <th scope="col">一</th>
        <th scope="col">二</th>
        <th scope="col">三</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button data-selection="7 月 13 日">13</button>
        </td>
        <td>
          <button data-selection="7 月 14 日：设计评审">14<small>设计评审</small>
          </button>
        </td>
        <td>
          <button data-selection="7 月 15 日：版本发布">15<small>版本发布</small>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <output>尚未选择日期</output>
</div>