--- title: "Calendar UI: anatomy, variants and examples | Kombai" description: "A calendar lays events out on a grid of days, weeks or months, so people can see what is coming up and when they are free." canonical_url: https://kombai.com/glossary/calendar/ author: "The Kombai Team" --- # Calendar A calendar lays events out on a grid of days, weeks or months, so people can see what is coming up and when they are free. - Also called: schedule view - Platforms: Web, Mobile - In the Kombai gallery: [102 web designs](https://kombai.com/gallery/web/calendar/), [61 mobile designs](https://kombai.com/gallery/mobile/calendar/) - [Saffron](https://kombai.com/gallery/inspirations/calendar-web-50/) (Web) - [Vellum](https://kombai.com/gallery/inspirations/calendar-ios-29/) (Mobile) - [Cascara](https://kombai.com/gallery/inspirations/calendar-web-49/) (Web) ## 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. ## When to use calendar - **Plans spread over days.** Meetings, shifts, bookings or deadlines across a week or a month. - **Finding free time.** People need to see busy and open days before they pick one. - **Daily tracking.** Habits, workouts or bills marked on the day they happen. ## When not to use one - **Picking one date.** For a date field in a form, use a date picker. - **A few events.** Three events a month read better as a short list. - **Phases and milestones.** For a plan that runs in stages, use a timeline. ## Anatomy 1. **Header**: Month and navigation 2. **Weekday row**: Labels the columns 3. **Day cell**: One date and its events 4. **Event**: Time and title 5. **Today**: Marks the current date 6. **States**: Today, selected, other month, focus ## Variants We sorted every calendar design in the Kombai gallery and found six patterns. ### 1. Month grids The default. Seven columns of days, with events as colored chips, avatars or dots inside each cell. - [Cadence](https://kombai.com/gallery/inspirations/calendar-web-4/) (Web) - [Basalt](https://kombai.com/gallery/inspirations/calendar-web-15/) (Web) - [Ridgeline](https://kombai.com/gallery/inspirations/calendar-ios-23/) (Mobile) ### 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. - [Calendar](https://kombai.com/gallery/inspirations/event-detail-web-27/) (Web) - [Quinby](https://kombai.com/gallery/inspirations/toast-notification-ios-12/) (Mobile) - [Halcyon](https://kombai.com/gallery/inspirations/goal-task-ios-29/) (Mobile) ### 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. - [Yonder](https://kombai.com/gallery/inspirations/calendar-ios-30/) (Mobile) - [Grainhouse](https://kombai.com/gallery/inspirations/calendar-ios-17/) (Mobile) - [Anchor](https://kombai.com/gallery/inspirations/calendar-ios-10/) (Mobile) ### 4. Year and multi-month views Twelve small months at once, or months stacked in a scroll, for availability, cycles and long plans. - [Chronica](https://kombai.com/gallery/inspirations/calendar-ios-15/) (Mobile) - [Wrenhaus](https://kombai.com/gallery/inspirations/calendar-web-14/) (Web) - [Vireo](https://kombai.com/gallery/inspirations/calendar-ios-27/) (Mobile) ### 5. Tracker calendars A mark in every day cell instead of events: activity rings, a streak flame or the phase of the moon. - [Nordlys](https://kombai.com/gallery/inspirations/calendar-ios-9/) (Mobile) - [Lunaro](https://kombai.com/gallery/inspirations/calendar-ios-4/) (Mobile) - [Vesper](https://kombai.com/gallery/inspirations/calendar-web-10/) (Web) ### 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. - [Roostly](https://kombai.com/gallery/inspirations/calendar-web-13/) (Web) - [Northbound](https://kombai.com/gallery/inspirations/calendar-ios-26/) (Mobile) - [Tarn Tickets](https://kombai.com/gallery/inspirations/calendar-web-41/) (Web) ## 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. - [Sorrel](https://kombai.com/gallery/inspirations/calendar-web-28/) (Web) - [Alcove](https://kombai.com/gallery/inspirations/calendar-web-11/) (Web) - [Solstice](https://kombai.com/gallery/inspirations/calendar-ios-5/) (Mobile) ### Team and project plans Calendars inside docs and project tools, with tasks and follow-ups placed on their due dates. - [Discovery Calls](https://kombai.com/gallery/inspirations/calendar-web-51/) (Web) - [Cardamom](https://kombai.com/gallery/inspirations/calendar-web-48/) (Web) - [Solstice](https://kombai.com/gallery/inspirations/timeline-history-web-37/) (Web) ### Bills and payouts Money apps place bills, deposits and subscriptions on the days they are due. - [Coinfold](https://kombai.com/gallery/inspirations/calendar-ios-13/) (Mobile) - [Isobar](https://kombai.com/gallery/inspirations/calendar-web-22/) (Web) - [Wrenfield](https://kombai.com/gallery/inspirations/calendar-web-59/) (Web) ## Calendar vs similar components | | [Calendar](https://kombai.com/glossary/calendar/) | [Date picker](https://kombai.com/glossary/date-picker/) | [Timeline](https://kombai.com/glossary/timeline/) | |---|---|---|---| | Shows | Events placed on dates | Dates to choose from | Milestones along a line | | Job | Seeing what happens when | Picking one date or a range | Following a sequence or a plan | | Best for | Schedules, bookings and trackers | Forms, filters and searches | Roadmaps, histories and order status | ## 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 - [Date picker](https://kombai.com/glossary/date-picker/) - [Time picker](https://kombai.com/glossary/time-picker/) - [Timeline](https://kombai.com/glossary/timeline/) - [Kanban board](https://kombai.com/glossary/kanban-board/) ## References - [WAI-ARIA Authoring Practices: Date picker dialog example](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) - [WAI-ARIA Authoring Practices: Grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) - [MDN: aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current) - [MDN: Intl.Locale getWeekInfo()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo)