Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Travel Itinerary Calendar Block for Ark UI

A week-long trip as days by Travel, Stay and Do lanes with hotel stays as bars across their nights, a day panel with the gap between each plan in words and a lane toggle that hides a lane.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Check a trip before you book the next leg with this travel itinerary calendar for React with Ark UI. A hairline frame with a plus mark on each corner shows Monday 2 to Sunday 8 November 2026 as a table of seven days by three lanes: flights, trains and taxis in Travel, the two hotels as bars across their nights in Stay and the things to do in Do, with "Nights: 6, hotels: 2" worked out from the stays. A Toggle Group hides any lane, in the table and in the list. Choosing a day, from the head of its column or from the day buttons on a phone, lists its entries in order with the gap between each pair in words: "Free 3 h 20 min", "Tight transfer: 55 min" or "Check-in 15:00, arriving 12:30: bags wait 2 h 30 min". The gaps are worked out from the typed times and each place's hours from UTC, so a flight says how long it was in the air and which way the clocks moved. A day with nothing to show keeps its height and offers to show every lane. It's built from Toggle Group, Badge, Empty, Button and a native table, with a CSS entrance only. For trip planners and any itinerary where the time between things matters.

FAQ

How do I fill it with my own trip?

Edit ENTRIES, STAYS and TRIP_START. An entry has a day, a lane, a start and end time, the number of hours each is from UTC, a title and a detail, and a kind of move, visit, checkin or checkout. A stay has a first and last day. The table, the gaps, the nights and the hotels are worked out from those.

How are the gaps worked out?

Each entry's start and end are turned into UTC using its offset, so a flight that leaves at 07:40 in Manchester and lands at 11:05 in Seville is 2 h 25 min long. The gap is the next entry's start minus the last one's end. Under an hour it reads as a tight transfer, and before a check-in it says how long the bags wait.

Why are the hotels bars and not cells?

A stay is a span of nights, not a moment. Each bar crosses exactly the columns of its nights, so you can see where one place ends and the next begins. The check-in and check-out are entries in the day's list, because that is where the timing matters.

What does hiding a lane do?

It blanks that lane's row in the table, keeping its height, and removes its entries from the day's list and the gaps between the rest. Hide Travel and the day shows only the places you are going, with the gaps worked out among them.

What stays local, and how do I wire it up?

Everything. The trip is typed at the top of the file and the chosen day and lanes live in the page; nothing is booked or saved. To make it real, load the trip from your own API and keep each place's offset from UTC with its entry.

All 100 calendar blocks