UI components · Data display
Calendar
Also called: Scheduler, Event calendar, Calendar view, Month view
A grid of dates by month or week that shows each day's schedule, events, or data right inside the cells.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstBuild a meeting room booking calendar. Default to the month view in a 7-column grid, with "‹ June 2025 ›" and a "Today" button at the top, and let users switch between month and week views. Each date cell shows that day's bookings, up to 2, with the rest shown as "+3 more." Mark today with a dark circle, and clicking an empty date opens a new booking modal.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Calendar is what you need.
Use Calendar when
- You need to view and plan schedules like meetings, shifts, or classes by date
- The data is closely tied to specific dates, like check-in records or daily sales
- Users need to see a whole month or week of plans at a glance
Pick something else when
You're just picking one date in a form
Use insteadDate PickerEvents only need to be browsed in order, not located by date cell
Use insteadTimelineOn a narrow phone screen with several detailed events per day, month view cells are too small
Use insteadList View
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Putting a big full-month calendar in a sign-up form for users to pick their birthday
- 02
Cramming event text into every cell so cells get taller and the month grid becomes uneven
- 03
Today isn't marked, and there's no button to jump back to today
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A month switcher and view toggle buttons at the top, a weekday header row, and date cells arranged by week, with that day's event bars inside each cell.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A calendar component draws a month as a grid of 7 columns and 5 to 6 rows. Each cell is one day and can hold that day's meetings, to-dos, shifts, or check-in records. It can also switch to a week or day view that shows time slots by the hour. At the top are previous month, next month, and "Today" buttons, and today's date is highlighted. FullCalendar is the most full-featured calendar library, and most common component libraries include a basic Calendar too.
It's most easily confused with a Date Picker. A date picker is an input that opens a small month view when clicked. Its job is "pick one date to fill into a form," and it closes once you pick. A calendar is a big panel laid out on the page, and its job is "see and plan what's happening over this period." If users only need to pick a birthday or an appointment date, use a date picker. Don't put a whole big calendar in a form.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-calendar- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-picker-calendar.el-calendar[class*="MuiDateCalendar-root"]:not([role="dialog"] *).arco-calendar.t-calendar.n-calendar[data-slot="calendar"]:not([data-slot="popover-content"] *).fc
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026