Calendar / Basic - Type × Mobile: Basic · Range Calendar · Range Calendar - 3 columns · Month and Year Selector · Persian × No · Yes
With Month and Year Dropdown / Item - Type: Month and Year · Month Only · Year Only
With time presets / Item - State: Default · Hover · Selected
Six standalones - none: Day Header · Week Number · Week Numbers · Custom Cell Size · Presets · Date and Time Picker
Using the Calendar
Why does the day button need four axes?
Because a cell in a month grid has to answer four questions at once: how big, what it is (an ordinary day, today, a day from the next month, part of a range, unavailable), what the pointer is doing, and whether it sits at the end of a range. Get those four right and the grid never draws anything by hand.
What is the Rounded axis for?
A selected range is a run of muted cells. The two ends want one rounded side each and the middle wants none. Rounded gives you Left, Right and None, and it only means anything on the Range variant - everywhere else it stays None.
Why is a selected range end two shapes?
The muted strip keeps its half-rounded corner at 8px, and a dark 10px pill sits inside it holding the number. As one shape the pill could not overhang the strip's square side, which is exactly what makes a range read as continuous rather than as separate cells.
Why 40 variants and not 150?
Two sizes times five variants times five states times three roundings is 150, and most of that is meaningless - Booked is only ever Disabled, Outside is only Default or Hover, Rounded matters on Range alone. The file holds the forty combinations that exist. The same pruning takes Custom Day Button to 36.