Calendars from the Kombai gallery: a project tool's launch calendar, a trip planner's month view and a time tracker's week of sessions.
What is a calendar?
A calendar is a view of time split into days, with events placed on the dates they happen. A month view shows several weeks at once, a week or day view shows timed events as blocks, and an agenda lists what is coming up in order.
- Today is marked, and arrows or a Today button move between months or weeks.
- Each event carries a time, a title and often a color for the calendar it belongs to.
Calendars show up across home, time picker, task and dashboard screens.
When to use a calendar
- Plans spread over daysMeetings, shifts, bookings or deadlines across a week or a month.
- Finding free timePeople need to see busy and open days before they pick one.
- Daily trackingHabits, workouts or bills marked on the day they happen.
When not to use one
- Picking one dateFor a date field in a form, use a date picker.
- A few eventsThree events a month read better as a short list.
- Phases and milestonesFor a plan that runs in stages, use a timeline.
Anatomy of a calendar
This one works. Pick a day to see its events, or tab into the grid and use the arrow keys. Page Up and Page Down change the month.
- Today
- Selected
- Other month
- Keyboard focus
- HeaderMonth and navigation
- Weekday rowLabels the columns
- Day cellOne date and its events
- EventTime and title
- TodayMarks the current date
- StatesToday, selected, other month, focus
Calendar variants
We sorted every calendar design in the Kombai gallery and found six patterns. Browse all 102 web and 61 mobile designs.
1. Month grids
The default. Seven columns of days, with events as colored chips, avatars or dots inside each cell.
2. Week and day views
Days as columns over an hour ruler, with events as blocks sized by their length and often a line at the current time.
3. Agendas and date strips
A row of dates across the top, with the chosen day's plan or a list of upcoming days below. Built for small screens.
4. Year and multi-month views
Twelve small months at once, or months stacked in a scroll, for availability, cycles and long plans.
5. Tracker calendars
A mark in every day cell instead of events: activity rings, a streak flame or the phase of the moon.
6. Price and availability calendars
Each day shows a nightly rate, a price tier or a showtime, so people can pick the day that suits them.
Where calendars show up
Booking a call or session
A month or a week of dates beside the open time slots for the chosen day.
Team and project plans
Calendars inside docs and project tools, with tasks and follow-ups placed on their due dates.
Bills and payouts
Money apps place bills, deposits and subscriptions on the days they are due.
Calendar vs similar components
Build notes
- Mark up the month as a table with role="grid", with one focusable day at a time.
- Arrows move by day and week, Home and End jump to the ends of the week, Page Up and Page Down change the month.
- Put aria-live="polite" on the month heading so the new month is announced.
- Mark today with aria-current="date" and the chosen day with aria-selected.
- On narrow screens, swap event chips for dots and list the chosen day's events below the grid.
- Start the week on the locale's first day, and let people change it.
FAQ
What's the difference between a calendar and a date picker?
A calendar is a view: it shows events across dates so people can see what happens when. A date picker is an input: people use it to choose one date or a range, and it usually closes once they do.
Month, week or agenda view?
Month gives an overview of busy and free days. Week and day views suit timed events, where an event's length matters. An agenda list works best on phones, where a month grid has no room for titles. Many calendars in the gallery let people switch between them.
Should the week start on Sunday or Monday?
It depends on the locale. US English starts the week on Sunday, while British English, German and French start it on Monday. In the browser, Intl.Locale's getWeekInfo() returns a locale's first day, so default to that and let people change it.
How do you fit many events into one day?
Show two or three chips, then a "+2 more" link that opens the full day. On narrow screens, replace the chips with dots and list the chosen day's events below the grid.
Related terms
All glossary terms · Browse 102 web and 61 mobile calendar designs