Figma calendar components

A calendar is one of the few components whose layout is dictated by data you do not control. A quiet Tuesday and a Tuesday with nine overlapping meetings share one grid, and the design has to survive both.

That is why scheduling tools, booking flows, ops rosters and internal availability screens all end up rebuilding the same three views, and why the interesting decisions are about density rather than styling.

Three views, three different questions

Month view answers what the shape of this month is. Week view is where people actually work. Day view is what you fall back to when a single day carries more than a column can hold.

All three exist at a 1,280px desktop width and at 375px for mobile, and the differences between the breakpoints are more than scale. A desktop month cell is 176px wide and 208px tall, enough for a stack of event chips at 161px by 26px each.

The mobile month cell shrinks to 56px by 88px, and the event stops being a chip and becomes an 8px dot. The header changes too, from a single 96px row on desktop to a 194px stack on mobile, since the month title, the view switcher and the navigation cannot share one line on a phone.

The week grid is a ruler

Week and day views are built on time, not on rows. A 72px gutter down the left holds hour labels, each hour occupies 96px, and the slot cells come in durations rather than sizes: 48px for 30 minutes, 96px for an hour, 144px for 90 minutes and 192px for two hours, plus an empty state for the hours with nothing in them.

Seven day columns split the remaining width at roughly 172px each. A time marker rules across the full frame to mark now, which is the small detail that makes a static mockup feel like a live product.

Setting the grid this way means an event drawn at 90 minutes cannot quietly be the wrong height, because the height is the duration.

Nine colors, and what color cannot carry alone

Event chips come in nine colors named for the same palette as the rest of the color styles in the kit, each with a hover state, in a month view version and a taller 160px by 64px block for day and week. Color is how people read a calendar at a glance, which makes it tempting to let it do all the work.

WCAG on the use of color is the reason not to, since a category that exists only as a hue is invisible to a meaningful share of your users. Keep the label and the time inside the chip on desktop, and be careful with the mobile month view, where the event really is reduced to a colored dot and the day cell needs to open something that spells out what those dots are.

The day with nine events

Overflow is the design problem the grid will hand you. A 208px month cell holds a few 26px chips before it runs out, and the honest answer is a plus more link that opens the day rather than shrinking the chips until nobody can read them.

Date cells inside the month grid are 24px, which is the floor set by the WCAG minimum target size, so there is no room to trade away. Column headers carry default, selected and today states, and the view switcher is a small 127px dropdown rather than a tab strip, which keeps the header steady when a fourth view gets added later.

When it is time to build, Untitled UI React calendars are open source, built with Tailwind CSS and React Aria, with date grid semantics, keyboard movement between days and locale aware week starts handled for you.