Calendar and scheduling UI

Month grids, availability pickers, booking flows and time slots.

Scheduling is a timezone problem wearing a calendar costume. The interface work is to make the zone explicit at the moment of choice — "3:00 PM your time (10:00 PM in Berlin)" — and to keep slot buttons big enough to hit on a phone. These cover the month view, the availability picker and the confirmation step.

20 matching10 blocks10 pagesFree to copy
Open the full page for this block

Meeting Scheduler

Day strip, slot grid and a time zone the visitor can change — because a slot list with no zone on it is how this pattern wastes an hour of everyone involved.

Scheduling & Calendar334 lines1 dep
Open the full page for this block

Appointment Booking Hero

A day strip built as a radio group rather than buttons, so arrow keys move between dates and sold-out days disable properly — the fold for anything sold by the appointment.

Heroes168 lines1 dep
Open the full page for this block

Digest Schedule Form

The control that turns notification volume down instead of off, which is the choice most people actually want.

Notifications175 linesNo deps
Open the full page for this block

Month Calendar Grid

A month view where event chips truncate and overflow becomes "+n more", so a busy Tuesday never changes the height of the row it sits in.

Scheduling & Calendar191 lines1 dep
Open the full page for this block

Scheduled Maintenance Window

Planned downtime with a live countdown, an end time in the reader’s timezone, what still works — and a different sentence once the window overruns rather than a negative timer.

Empty & Error States228 lines1 dep
Open the full page for this block

Stock Availability List

Availability per variant stated before the cart, because discovering it at checkout is where the basket gets abandoned.

Product Listings149 linesNo deps
Open the full page for this block

Daily Activity Heatmap

A year of daily activity as one square per day, bucketed against a quantile so a single outlier cannot flatten the scale.

Charts & Metrics231 linesNo deps
Open the full page for this block

Conference Agenda Grid

Time down the side, tracks across, breaks spanning the width — the one comparison a month view cannot make. Falls to a linear list on a phone, from the same array.

Scheduling & Calendar397 lines1 dep
Open the full page for this block

Integration Directory Grid

What each integration actually does, not a wall of logos — with availability as a text pill rather than a tinted border, and the name as the link so the card is not one enormous one.

Feature Sections208 linesNo deps
Open the full page for this block

Support Chat Widget

The corner launcher, with real availability instead of a stock reassurance, article deflection before the form, no self-opening, and a way to make it go away.

Communication307 lines1 dep
Open the full page for this page

Scheduled Maintenance

Planned downtime with an actual end time on it — "back soon" is not a time, and a maintenance page without one looks like an outage nobody has noticed.

System Pages2 blocks35 lines
Open the full page for this page

Conference Programme

Both days in full, as two grids rather than a day switcher — because this is the page people print, and a tab hides half of it from find-in-page.

Marketing Pages4 blocks263 lines
Open the full page for this page

Local Service Landing Page

A booking widget above the fold, every price published including the awkward ones, and a footer carrying the registrations a regulated trade must show.

Marketing Pages9 blocks353 lines
Open the full page for this page

Single Offer

One thing, one price, named above the fold — for a course, a consultation or a one-time licence, where there is nothing to compare against and hiding the number answers the only question last.

Marketing Pages7 blocks57 lines
Open the full page for this page

Workspace Activity

Backwards from now and forwards from it on one screen — a day-grouped timeline, a month grid where a busy Tuesday never changes the row height, and the state both are in on day one.

App Screens3 blocks51 lines
Take 1 of 2
Open the full page for this page

Status Page

Written for the person refreshing it during an outage: current state above the fold, the maintenance window as a real block with an end time, and a component list that names what still works.

System Pages6 blocks155 lines

Questions about calendar and scheduling ui

How do I avoid timezone mistakes?
Store UTC, render in the viewer's zone via the Intl API, and always print the zone next to the time. Never do arithmetic on a date string — a slot that shifts by an hour twice a year is a DST bug someone will notice before you do.
How accessible is a calendar grid?
It needs to be a real grid with arrow-key navigation and the selected date announced with its full name. A table of buttons where only Tab works is technically operable and practically unusable for a month view.
Are these calendar and scheduling ui free to use?
All 20 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add booking-scheduler` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.
Why does this page mix components and whole pages?
Because the phrase does. The same search covers 10 section blocks and 10 composed pages — one of them is the right size for what you are building, and which one depends on how much of the screen you still have to write.