# Event Schedule > A practical two-day event programme with day selection, session filters and preparation notes, framed by a bold photographic event rail. Canonical: https://gsapvault.com/sections/event-schedule-section Live demo: https://gsapvault.com/demos/event-schedule-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | accessible-filtering, state-transition, progressive-enhancement, keyboard-navigation, container-queries, responsive-section | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview Event Schedule helps visitors plan their time at a conference, workshop or community event. A bold event rail holds the identity, date, venue, booking information and a contextual photograph. Beside it, a chronological programme makes session times, durations, formats and rooms easy to scan. The fictional Assembly example presents two days of design talks and practical making workshops in Sheffield. Day and format controls keep the programme focused. Native session disclosures reveal what each session covers and what to bring; booking information is explicitly sample content. The same composition becomes a compact introduction followed by adjacent controls and agenda on phones. Every session remains readable without JavaScript or GSAP. Root-scoped styling, ordinary local photography and markup-derived navigation make the section straightforward to adapt to a different event. ## Features - Complete event context with dates, venue, photograph and booking information - Two-day chronological programme with eight sample sessions - Markup-derived day controls and All, Talks and Workshops filters - Session time, duration, format, room and native preparation-note disclosures - Short interruptible agenda transitions that settle on the latest selection - Keyboard day navigation, native touch controls and polite result counts - Live reduced-motion support and complete no-JS or missing-GSAP fallback - Local generated workshop photograph with ordinary image and crop edit points - Named container queries, scoped brand variables and independent instances - Public mount, select, filter and per-instance teardown API ## Use Cases - Design conferences and creative workshop weekends - Museum events and public learning programmes - Professional development and training schedules - Community festivals with talks and hands-on sessions ## Vibe-Code Ready Setup This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works The programme starts as complete day articles containing native session disclosures. Each session keeps its time, format, room, title and preparation notes in editable HTML. Without JavaScript or GSAP both days remain available in normal reading order. With enhancement, the section derives its day and format controls from those articles. Selecting a day or session format updates the relevant agenda immediately and introduces the visible rows with a brief transition. Repeated choices settle on the final request, while a polite result count confirms the selection. Native details reveal practical information without an extra interaction framework. Reduced motion switches state without animation, including when the preference changes during a visit. Each instance owns its controls, listeners and GSAP context; teardown restores the complete original programme without affecting the host page. ## Documentation How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick start Open `index.html` to see the section. For an existing page, copy the `
` element and its complete contents. Copy the `assets/` directory beside your page, then load: _Code snippet omitted: it ships with the download._ There is no build step or plugin dependency. The preview `
` and its `body { margin: 0 }` style are host furniture; do not copy them into an existing page. The section does not require full-screen height, sticky positioning or a particular scroll library. ### Make it yours Edit the event name, introductory copy, date, venue, session text and `