跳到主要内容
界面图谱Interface Atlas
☰
EN
页面Page / Productivity

日历页

Calendar Page

别名:日历页日程页日历界面排期页面日程表月历看日期的页面安排时间的页面

这是什么

用时间网格承载事件与日程的页面:以月、周、日三种尺度切换视图,事件块按起止时间定位并支持拖拽改期, 顶部有今天、前后翻页与视图切换,侧栏列出待办与冲突。 它是排期、预约与团队协调的主界面。

交互实验室

试一试,再决定怎么用

正在加载实验室…

✓ 适用场景

  • 事件有明确的起止时间与日期
  • 用户需要跨天、跨周比较安排
  • 多人共享同一时间资源(会议室、班表)

✕ 不适用场景

  • 只有截止日期、没有具体时段(用列表或看板)
  • 纯按时间正序的日志流(用时间线)
  • 单次预约、无需浏览时间网格(用日期选择器)

常见形式

月视图

Month View

六周网格,先看整体疏密

周视图

Week View

逐时排布,会议与班表常用

议程列表

Agenda List

按天罗列事件,移动端友好

页面结构

  1. 01

    工具栏

    今天、前后翻页、视图切换与新建事件入口。

  2. 02

    日期网格

    月/周/日不同粒度的行列表头与时间轴。

  3. 03

    事件块

    按起止定位、颜色分类,可点击编辑、拖拽改期。

  4. 04

    今日标记

    当前日期高亮,有事件时显示圆点。

  5. 05

    侧栏议程

    选中日期的待办与时间冲突提醒。

实现要点

gridgrid-template-columns: repeat(7, 1fr)overflow: autoposition: sticky

月视图用 7 列 grid,日期单元格纵横比为 1 / 1 并让事件块超出时省略号截断; 周视图用时间轴 grid-rows 配合绝对定位事件块(top/height 由起止换算)。工具栏吸顶, 网格横向可滚动;拖拽改期用 HTML5 DnD 或指针事件,落点高亮 200ms 反馈。

相关概念

日期选择器Date Picker

用日历网格选择日期的复合控件,通常由输入框触发弹出,也常内嵌展示。 头部提供年月切换,网格按周排列日期并高亮今天与选中日; 范围形态用两个日期夹出区间。避免手输日期的格式错误。

组件包含组件
分段控制器Segmented Control

将少量互斥选项并排放在同一个容器中的选择控件。选中状态通过底色、文字和边界同时表达,切换后立即更新当前视图或设置。它适合时间范围、显示方式等轻量选择;选项应简短、稳定且始终可见。与标签页不同,它通常修改同一内容的呈现方式,而不是进入另一组内容。

组件包含组件
时间线Timeline

沿时间顺序组织事件的展示组件,通过时间、节点和内容说明事件之间的先后关系。它适合展示活动日志、项目进展或订单状态。时间线呈现已经发生或计划发生的事件,而步骤条强调需要用户完成的任务阶段;当事件可展开时,应保留事件标题和时间,避免用户失去位置。

组件包含组件
拖放Drag and Drop

用按住—拖动—松手的直接操作,把对象移动到新位置或新容器。所见即所得,比菜单命令更贴近空间直觉;拖动中要有清晰落点指示,目标容器需给出接受反馈。范围比拖拽排序更广:移动、归位、跨列表投递都算。

交互模式使用模式
空状态Empty State

当列表或页面没有数据时,不留一片空白,而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点:首次使用教用户开始,搜索无结果给出路。

交互模式使用模式

参考来源

Markdown 版(给 Agent) · JSON