Event Schedule

Quick start

Open index.html to see the section. For an existing page, copy the <section class="es-schedule" data-event-schedule> 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 <main> 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 <time datetime> values directly in index.html. Update the root aria-label as well. The two top-level headings are h2; change their tags to suit your page hierarchy without changing their classes.

The booking action is a native disclosure explaining that this is a sample event. Replace the complete .es-booking disclosure with an ordinary registration link styled using your site's button class. The .es-booking styles are designed for the supplied disclosure, not an anchor. Set its actual ticket-provider destination; this package has no booking backend, payment handling or calendar integration.

The first block of assets/style.css contains brand controls on .es-schedule: paper, ink, muted text, rules, accent, accent text, focus colour, body/display fonts, content width, spacing, corners and photo crop. For example, change --es-accent to #245747, change the name to your museum and replace the workshop copy with open-studio activities. Recheck contrast after changing colours. System fonts work immediately; use your own licensed webfont by changing the font variables.

Replace the photograph

The image is assets/img/workshop.webp, a 1200×800 local WebP. Replace it with an ordinary photograph or edit the <img src> to your new file. Set the image's intrinsic width and height and write a relevant alt. A landscape image with its subject near the centre is recommended. No generated art, SVG or animation editing is needed.

The desktop frame uses --es-photo-ratio (2.1 by default) and --es-photo-position (50% 47%). Mobile uses a 2.6 ratio in the named container query to keep the introduction compact. Adjust that rule if your photo needs a taller phone crop. The image loads promptly and reserves its space; there are no hidden responsive sources to replace. Update the caption and remove the generated-image disclosure when your own real photography replaces it.

Change the programme

Each [data-event-day] article is one day. data-day-label supplies its control label; .es-day-heading supplies its fallback heading. Duplicate, remove or reorder a whole article to change the days. Each [data-session] details element is one session. Duplicate, remove or reorder it within a day and edit the title, time, duration, room and preparation notes. Keep sessions in chronological markup order.

data-session-type="Workshop" determines its format filter. The visible metadata should use the same label. Filters and counts are generated from the markup, with no separate content array or fixed number of days/sessions. The shipped simple English labels pluralise by adding “s”; edit the label expression in script.js if your language needs another plural form. One day hides day selection; one format hides format selection. An empty selected day shows an explicit no-sessions message. There is no code limit, but long programmes benefit from concise summaries.

When modifying repeated content after mount, destroy and mount that root again so controls match the new markup.

Behaviour and options

data-motion-duration="0.24" controls the row transition, in seconds, clamped to 0–0.6. Set 0 for immediate changes. This is independent of the brand controls.

The script automatically mounts each [data-event-schedule] once. For dynamically inserted content:

Code snippet omitted: it ships with the download.

The same API is available as root.eventSchedule. Destroy before removing a root in a client-side router. Repeated mount calls return its existing instance. Separate roots own their state and cleanup. To change an event's contents, call destroy, edit its semantic markup, then mount again.

Accessibility and integration

Native buttons work with pointer, keyboard and touch. Day controls also support Left/Right, Home and End. Pressed state identifies the active day/format and a polite status announces the matching count. Session and booking disclosures retain native Enter/Space behaviour. Focus indicators are visible on both surfaces.

Without JavaScript or GSAP, all days remain readable and every native disclosure works. Reduced motion is respected on mount and when the preference changes while mounted. No content is hidden before enhancement. The section uses a named container query to stack in narrow columns, does not alter host typography or scrolling, and needs no page-wide reset. Allow its natural height to grow when details expand. It has been exercised at laptop, desktop, phone and narrow-host sizes, including two independent instances and destroy/remount.

Dependencies and credits

• GSAP 3.15.0 core from jsDelivr. No plugins or Lenis. Use is subject to the applicable GSAP licence: https://gsap.com/standard-license/.
• One locally bundled, generated concept photograph created with OpenAI image generation for this fictional example. It does not document a real event, real workshop attendees or a testimonial.
• System Arial/Helvetica/sans-serif fonts; no font files or third-party photography are required.
• Section code is covered by the GSAP Vault licence supplied with your download. The included image may be replaced normally; no image-generation service is needed to use this section.