# Calendars

> Date pickers, range selectors and booking pickers.

- [Date Time Picker](https://www.assembli.design/components/date-time-picker.md): Date and time in one popover: a calendar beside a scrolling column of time slots that centres the chosen time, slots before the minimum greyed out, a time-zone footer and a Done button. On a phone the slots become a swipeable row under the calendar.
- [Month Picker](https://www.assembli.design/components/month-picker.md): Month and month-range picker for billing periods and reports: a year you page through, months laid out in quarter rows, a hover-preview band that spans years, clickable Q1–Q4 labels in range mode, and shortcuts like This quarter and Last 12 months.
- [Due Date Picker](https://www.assembli.design/components/due-date-picker.md): The due-date chip from task trackers: reads like speech (Today, Tomorrow, Friday) and turns amber on the day and red when overdue. Its popover parses typed dates like “next fri”, “in 2 weeks” or “dec 12” with a live preview, offers Today, Tomorrow, This weekend and Next week, and keeps a mini calendar underneath.
- [Date Field](https://www.assembli.design/components/date-field.md): Segmented date input you type into: month, day and year in the locale's order (mm/dd/yyyy, dd/mm/yyyy…), auto-advancing as you type, arrow keys to step, plus a calendar button for clickers. Validates min, max, required and impossible dates (Feb 30) with an inline message.
- [Date Range Picker](https://www.assembli.design/components/date-range-picker.md): Analytics-style date range picker: a trigger that names the preset in use, a preset rail (Last 7 days, Month to date, Last year…), Start and End fields, two months with a live hover band, a day count, and Apply/Cancel so nothing changes until you confirm. Collapses to one month and preset chips on narrow screens.
- [Date Picker](https://www.assembli.design/components/date-picker.md): The everyday date input: a field-style trigger that opens a calendar popover. Click the caption to zoom out to months and years, page with arrows or PageUp/PageDown, and pick with the keyboard. Today dot, blocked and out-of-range days, Today and Clear shortcuts, and a six-week grid that never changes height.
- [Zone Planner](https://www.assembli.design/components/zone-planner.md): Meeting planner across time zones: a draggable playhead scrubs every city's day at once and the hours everyone is awake light up.
- [Tear-off Calendar](https://www.assembli.design/components/tear-off-calendar.md): Desk tear-off calendar as a date picker: drag the top sheet up to tear the day off, or use the arrow keys. Shows day of year, ISO week, the moon phase and a handwritten note per day.
- [Day Schedule](https://www.assembli.design/components/day-schedule.md): Single-day agenda grid: drag events to reschedule with 15-minute snapping, pull the bottom handle to resize, overlapping events split into columns, and a live now-line. Arrow keys move the focused event.
- [Booking Picker](https://www.assembli.design/components/booking-picker.md): Scheduling card in the Cal.com mould: host details, a month calendar and a time-slot column that slides in for the chosen day. Picking a slot reveals a Confirm button, then resolves to a receipt.
- [Clock Time Picker](https://www.assembli.design/components/clock-time-picker.md): Analog time picker: drag the hand around the dial to choose hours, then minutes, with AM/PM toggle and tick snapping.
- [Range Calendar](https://www.assembli.design/components/range-calendar.md): Date range picker with live hover preview, a continuous selection band that wraps cleanly across weeks, animated month changes, one or two months, and full arrow-key navigation.
- [Week Strip](https://www.assembli.design/components/week-strip.md): Compact week picker for schedules and habit trackers: seven day tiles with a sliding selection pill, event dots, week-by-week paging and a Today shortcut.

Back to [all components](https://www.assembli.design/components.md).