Event Schedule Day Tabs

FreeNew

Use this when a programme runs over several days: the accessible tabbed carousel with the day names as tab text, arrow keys between days and one schedule list per panel.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

defaultDay0

Guide and examples

When to use it

Use it for conferences, festivals and courses with two to five days, where people want one day at a time with the day name visible.

Do not use it for a single day or for more than about seven days. Use a full-page schedule with a day filter.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/event-schedule-day-tabs.json

It composes Carousel Aria, which the CLI installs for you.

Usage

import { EventScheduleDayTabs } from "@/components/event-schedule-day-tabs"

<EventScheduleDayTabs label="Programme" days={days} />

Props

Prop	Type	Default	Description
`days`	`ScheduleDay[]`	`-`	Each has an id, label (the tab text), and sessions (`{ time, title, room }`).
`label`	`string`	`-`	Accessible name of the carousel.
`defaultDay`	`number`	`0`	Index of the day shown first.

Accessibility

It is the WAI-ARIA tabbed carousel with visible tab text: a tablist, tabs with roving tabindex, and a labelled tabpanel per day.
Each session list is a real list with the time as text, so the programme is readable without the tabs.
Nothing rotates by itself.
Keyboard: Left / Right: previous or next day; Home / End: first or last
Keyboard: Tab: from the tabs into the day's schedule

Testing

The pattern ships with a Testing Library test (event-schedule-day-tabs.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.