Skip to content
界面图谱Interface Atlas
☰
中文
PagesPage / Productivity

Calendar Page

日历页

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

What is it

A page laying events onto a time grid with month, week and day views, click-to-edit blocks and drag-to-reschedule, anchored by today and prev/next controls.

Interactive playground

Try it. Make an informed choice.

Loading lab…

✓ When to use

  • Events have clear start and end times
  • Users compare plans across days or weeks
  • Shared time resources across people — rooms, shifts

✕ When not to use

  • Only due dates, no time slots — a list or board fits
  • A purely chronological log — use a timeline
  • A single booking with no grid browsing — a date picker is enough

Variants

Month View

月视图

Six-week grid showing overall density first

Week View

周视图

Hour-by-hour columns, common for meetings and shifts

Agenda List

议程列表

Events listed by day, mobile friendly

Page structure

  1. 01

    Toolbar

    Today, prev/next navigation, view switcher and a create-event entry.

  2. 02

    Date grid

    Row and column headers plus a time axis at each granularity.

  3. 03

    Event block

    Positioned by start and end, color-coded, click to edit and drag to reschedule.

  4. 04

    Today marker

    The current date is highlighted, dotted when events exist.

  5. 05

    Side agenda

    Tasks for the selected day plus time-conflict warnings.

Implementation

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

Month view uses a seven-column grid with square-ish cells that clamp overflowing events; week view pairs a time-axis grid with absolutely positioned blocks (top/height from time). Keep the toolbar sticky and the grid scrollable, and highlight a 200ms drop target when rescheduling via HTML5 drag-and-drop or pointer events.

Related concepts

Date Picker日期选择器

A composite control picking dates on a calendar grid, usually popped from a trigger input but often shown inline. The header navigates months, the grid lays days out by week highlighting today and the selection; the range form bounds an interval with two dates. It avoids manual date-entry mistakes.

ComponentsContains
Segmented Control分段控制器

A compact group of mutually exclusive choices with an immediately visible selection. Use it to change a time range or display mode within the same view. Keep labels short and all choices visible. Unlike tabs, it usually changes how the current content is presented rather than moving between separate panels.

ComponentsContains
Timeline时间线

A display that orders events by time, using timestamps, markers and content to explain sequence. It works for activity logs, project journals or order history. Unlike a stepper, which emphasizes task stages to complete, a timeline tells an event story. Keep titles and times visible when details expand.

ComponentsContains
Drag and Drop拖放

Move an object to a new slot or container by press-drag-release direct manipulation. It is spatial and immediate, closer to intuition than menu commands; a clear drop indicator and an accepting target are required while dragging. Broader than mere reordering — moving, filing and cross-list delivery all count.

PatternsUses pattern
Empty State空状态

When a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.

PatternsUses pattern

Sources

Markdown for agents · JSON