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
- 01
Toolbar
Today, prev/next navigation, view switcher and a create-event entry.
- 02
Date grid
Row and column headers plus a time axis at each granularity.
- 03
Event block
Positioned by start and end, color-coded, click to edit and drag to reschedule.
- 04
Today marker
The current date is highlighted, dotted when events exist.
- 05
Side agenda
Tasks for the selected day plus time-conflict warnings.
Implementation
gridgrid-template-columns: repeat(7, 1fr)overflow: autoposition: stickyMonth 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
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.
ComponentsContainsA 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.
ComponentsContainsA 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.
ComponentsContainsMove 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 patternWhen 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