Skip to content
FiNAN Logo FiNAN Docs

EventSched

The EventSched component renders a collapsible schedule by day, with event times, titles, speakers, and details. It is used on the Triennial Gathering event page and includes built-in accordion behavior with accessible markup.

Overview

Section titled “Overview”

File: src/components/EventSched.astro Data config: src/data/events/triennialGathering2026Schedule.ts Used on: src/pages/triennial-gathering-2026.astro

This component is ideal for:

  • Displaying multi-day conference schedules
  • Grouping sessions under date headings
  • Keeping long agendas readable with collapsible panels

Props

Section titled “Props”
interface Event {
  readonly time?: string;
  readonly title: string;
  readonly speaker?: string;
  readonly details?: string;
}


interface EventDay {
  readonly date: string;
  readonly description?: string;
  readonly events: readonly Event[];
}


interface Props {
  schedule: readonly EventDay[];
}

Prop details

Section titled “Prop details”
  • schedule: Array of event days; each day includes a date label and events list

Usage

Section titled “Usage”

  1. Import the component and schedule data:

    ---
    import EventSched from '../components/EventSched.astro';
    import { triennialGathering2026Schedule } from '../data/events/triennialGathering2026Schedule';
    ---

  2. Render the schedule in the page:

    <EventSched schedule={triennialGathering2026Schedule} />

  3. Update schedule data in the data file:

    • Path: src/data/events/triennialGathering2026Schedule.ts
    • Add or edit dates and events

Data configuration

Section titled “Data configuration”

Example schedule entry

Section titled “Example schedule entry”
export const triennialGathering2026Schedule = [
  {
    date: 'March 30, 2026',
    description: 'Conference Day',
    events: [
      {
        time: '09:15 – 09:45',
        title: 'Opening Keynote',
        speaker: 'Margrét Manda Jónsdóttir',
        details: 'Landspítali University Hospital, Nurse Manager',
      },
    ],
  },
] as const;

Component behavior

Section titled “Component behavior”
  • Each date row is a toggle button with aria-expanded state
  • The schedule body expands by animating the grid row height
  • Chevron icon rotates to indicate open/closed state
  • Only the clicked date toggles; multiple dates can be open at once

Accessibility

Section titled “Accessibility”
  • Hidden h2 (sr-only) improves document outline
  • aria-controls links button and panel
  • role="region" with aria-labelledby per day
  • Keyboard focus styles via focus-visible ring

Styling details

Section titled “Styling details”
  • Container: max-w-4xl with horizontal padding
  • Card: rounded-lg with border and shadow-sm
  • Hover: Slight shadow increase and light background change
  • Time badge: Mono font with blue background and icon
  • Expanded state: Rounded corners adapt to open/closed state

JavaScript lifecycle

Section titled “JavaScript lifecycle”

The component binds a single click handler and cleans up on view transitions.

const initEventAccordion = () => {
  accordionController = new AbortController();
  document.addEventListener('click', handleAccordionClick, { signal });
};


document.addEventListener('astro:page-load', initEventAccordion);
document.addEventListener('astro:before-swap', () => {
  accordionController?.abort();
});

Troubleshooting

Section titled “Troubleshooting”

Accordion does not expand

Section titled “Accordion does not expand”
  • Confirm the .event-toggle button exists and has aria-expanded
  • Check for JavaScript errors in the browser console
  • Ensure no other script stops propagation on the button

Chevron icon does not rotate

Section titled “Chevron icon does not rotate”
  • Verify the .chevron class exists on the SVG
  • Confirm the rotate-180 class is available in Tailwind
Section titled “Related components”