Event Schedule
Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
- Type: Events section
- Styles: Light, Enterprise
- Licence: Charcoal UI Pro
About Event Schedule
Event Schedule lays out an agenda by day, with track filters and a bookmark on every session so attendees can build their own schedule and view just their picks.
It is a full-width events section for React and Tailwind CSS 4, in a light and enterprise style. Preview it at any width above, then install it with one command.
When to use Event Schedule
- Conferences and summits.
- Gym and yoga timetables.
- Tour dates and festival screenings.
- Webinar series and open days.
How it is built
Days, sessions and tracks are plain data, bookmarks are local state, and sessions animate as filters change.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Event Schedule
Event Schedule is part of 13 full templates, so you can see it in a finished page.
- Marginalia template: An independent bookshop, online.
- Summit template: Memberships, classes and coaches.
- Signal template: Sell out a conference.
- Halden template: A band site: album, tour, merch.
- Launch Night template: One evening, one RSVP.
- Reel template: Ten days, ninety films.
- Townhall template: Sessions people register for.
- Trailhead template: Guided hikes, every weekend.
- Lotus template: Classes, teachers and a timetable.
- Forkcamp template: From zero to hired in 16 weeks.
- Quadrangle template: Programmes, people and open days.
- Gather template: Monthly meetups, sorted.
- Hive template: Desks, rooms and people worth sitting near.
- Event Speakers: A big-type React speaker list with a duotone card for the focused speaker
- Event Tickets: React ticket tiers with sold-out bars, quantity steppers and a checkout total
Install Event Schedule
npx shadcn@latest add @charcoal/event-scheduleEvent Schedule is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Event Schedule work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.