Event Schedule List Template

A clean, timeline-style template for displaying an event schedule or conference agenda.

This component organizes time slots into a clear, responsive layout that stacks on mobile and aligns side-by-side on larger screens.

A screenshot of a two-day event schedule list.

Get Source Code Preview

About this Template

This schedule template is built on a semantic unordered list (ul), where each list item represents a time slot. Flexbox is used to align the time and the event details, providing a robust and flexible layout. On small screens, the content stacks vertically for easy reading, while on desktops it presents as a two-column format. The schedule is grouped by day for enhanced organization.

Features

Semantic List Structure: Uses a ul and li structure, which is the correct way to present a list of events.
Responsive Layout: A mobile-first design that adapts gracefully from a single-column to a multi-column view.
Logical Grouping: Sessions are grouped under daily headings, making complex schedules easy to follow.
Self-Contained Styles: All CSS is scoped to the .event-schedule-template class to prevent conflicts with your website's styles.
Easy Theming: Key design values like colors and fonts are controlled by CSS variables for quick customization.

Code Breakdown

The structure consists of a parent div with the class .event-schedule-template. Inside, each day's agenda is wrapped in a section. The actual schedule is a ul with the class .schedule-list.

Each list item, representing a single event, has a class of .schedule-item and is a flex container (display: flex). This container has two children: a div with the class .time-slot and another div with the class .event-details. A media query adjusts the flex-direction for small screens to achieve the stacked layout.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Schedule List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Event Schedule Component Styles - Copy from here
           ========================================================================== */
        .event-schedule-template {
            --schedule-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --sch-primary-text-color: #1e293b;
            --sch-secondary-text-color: #64748b;
            --sch-accent-color: #7c3aed;
            --sch-border-color: #e2e8f0;
            --sch-bg-color: #ffffff;

font-family: var(--schedule-font-family);
            color: var(--sch-primary-text-color);
            width: 100%;
            max-width: 900px;
        }
        
        .event-schedule-template *,
        .event-schedule-template *::before,
        .event-schedule-template *::after {
            box-sizing: border-box;
        }
        
        .event-schedule-template .schedule-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .event-schedule-template .schedule-header h1 {
            font-size: 2.5rem;
            margin: 0 0 0.5rem 0;
        }

.day-schedule {
            margin-bottom: 3rem;
        }

.day-schedule h2 {
            font-size: 1.75rem;
            padding-bottom: .75rem;
            border-bottom: 2px solid var(--sch-border-color);
            margin-bottom: 2rem;
        }

.schedule-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

.schedule-item {
            display: flex;
            flex-direction: column; /* Mobile first */
            gap: .5rem;
            padding: 1.5rem 0;
        }
        
        .schedule-item:not(:last-child) {
            border-bottom: 1px solid var(--sch-border-color);
        }

.time-slot {
            font-weight: 600;
            color: var(--sch-accent-color);
        }

.event-details h3 {
            font-size: 1.125rem;
            font-weight: 600;
            margin: 0 0 0.5rem 0;
        }

.event-details .speaker,
        .event-details .location {
            font-size: 0.9rem;
            color: var(--sch-secondary-text-color);
            margin: 0;
            line-height: 1.5;
        }
        
        .event-details .speaker {
             font-style: italic;
        }

/* Desktop Layout */
        @media(min-width: 768px) {
            .schedule-item {
                flex-direction: row;
                gap: 2rem;
            }
            .time-slot {
                flex-basis: 160px;
                flex-shrink: 0;
                text-align: right;
            }
            .event-details {
                flex-grow: 1;
            }
        }
    </style>
</head>
<body>

<div class="event-schedule-template">
    <header class="schedule-header">
        <h1>Mythical Beings Summit</h1>
    </header>

<section class="day-schedule">
        <h2>Day 1: Theory & Practice</h2>
        <ul class="schedule-list">
            <li class="schedule-item">
                <div class="time-slot"><time datetime="09:00">9:00 AM</time> - <time datetime="10:00">10:00 AM</time></div>
                <div class="event-details">
                    <h3>Keynote: Hoard Management in a Digital Age</h3>
                    <p class="speaker">Speaker: Ignis, the Frugal Wyrm</p>
                    <p class="location">Location: The Grand Cavern</p>
                </div>
            </li>
            <li class="schedule-item">
                <div class="time-slot"><time datetime="10:30">10:30 AM</time> - <time datetime="11:30">11:30 AM</time></div>
                <div class="event-details">
                    <h3>Panel: Vocal Projection Techniques for Luring Sailors</h3>
                    <p class="speaker">Panelists: The Siren Syndicate</p>
                    <p class="location">Location: The Forbidden Cove</p>
                </div>
            </li>
             <li class="schedule-item">
                <div class="time-slot"><time datetime="12:00">12:00 PM</time> - <time datetime="13:00">1:00 PM</time></div>
                <div class="event-details">
                    <h3>Networking Lunch</h3>
                    <p class="location">Sponsored by Ambrosia Catering</p>
                </div>
            </li>
             <li class="schedule-item">
                <div class="time-slot"><time datetime="13:30">1:30 PM</time> - <time datetime="15:00">3:00 PM</time></div>
                <div class="event-details">
                    <h3>Workshop: Improving Depth Perception for Modern Lairs</h3>
                    <p class="speaker">Host: Polyphemus, Visionary</p>
                    <p class="location">Location: The Oculus Workshop</p>
                </div>
            </li>
        </ul>
    </section>

<section class="day-schedule">
        <h2>Day 2: Application & Networking</h2>
        <ul class="schedule-list">
            <li class="schedule-item">
                <div class="time-slot"><time datetime="10:00">10:00 AM</time> - <time datetime="11:00">11:00 AM</time></div>
                <div class="event-details">
                    <h3>TED Talk: Riddles as a Non-Lethal Home Security System</h3>
                    <p class="speaker">Speaker: The Sphinx of Giza</p>
                    <p class="location">Location: The Great Library</p>
                </div>
            </li>
             <li class="schedule-item">
                <div class="time-slot"><time datetime="15:30">3:30 PM</time> - <time datetime="16:00">4:00 PM</time></div>
                <div class="event-details">
                    <h3>Closing Remarks & Lightning Bolt Raffle</h3>
                    <p class="speaker">Speaker: Zeus</p>
                    <p class="location">Location: The Grand Cavern</p>
                </div>
            </li>
        </ul>
    </section>
</div>

</body>
</html>

View Output