Evergreen Event Schedule

Turn a spreadsheet of sessions into an event schedule people can actually use, on any website.

It works anywhere you can paste a block of HTML: Squarespace, WordPress, Wix, Webflow, Shopify (Online Store 2.0 themes), Ghost, Carrd and plain HTML pages.

• Edit a spreadsheet, the page updates. Use a Google Sheet your team shares, a CSV file, or rows pasted into the page.
• Day tabs and time slots. Sessions are grouped by start time, so parallel sessions sit side by side.
• Find sessions:
  • search titles, speakers, rooms and descriptions
  • filter by track
  • "Upcoming only" hides sessions that have ended
• Live during the event:
  • "Happening now" and "Up next" labels
  • the schedule opens on today's tab automatically
  • all of this follows your event's time zone, not the visitor's
• My schedule. Visitors star sessions to build a personal agenda. It's saved in their own browser, with no account needed.
• Add to calendar. Every session has a Google Calendar link and an .ics file for Apple Calendar and Outlook.
• Shareable links. The day, track and search are saved in the page address.
• Fits your site.
  • uses your site's fonts and colors, and you choose one brand color
  • each track gets its own color stripe
  • prints cleanly
• Accessible. Real labels, keyboard support, screen-reader announcements and visible focus.
• No database, plugin, account, cookies or tracking. One script of about 27 KB.

Open demo/index.html to try it with sample data.

Quick start (10 minutes)

1. Make your list from templates/schedule-template.csv. Open it in Google Sheets or Excel and replace the example rows with your sessions.
2. Choose how the data gets to your page: | Option | Best for | File in embed/ | |---|---|---| | Google Sheet | Schedules that change while you plan | 1-google-sheet-embed.html | | Paste the rows | A finished schedule that won't change | 2-pasted-data-embed.html | | Upload a CSV file | Sites where you can upload files | 3-hosted-file-embed.html |

1. In the snippet:
   • set data-timezone to your event's time zone, for example America/Chicago, America/New_York or Europe/London
   • set data-event-name to your event's name
2. Paste the snippet into your site and publish. INSTALL.md has click-by-click steps for each site builder.

Your spreadsheet

The first row holds the column names. Title, Date and Start are required. Column names aren't case-sensitive, and common alternatives work, such as "Session", "Day", "Time", "Room" or "Presenter".

How the finder handles a few edge cases:

• Missing end time: the session counts as 30 minutes long for the "Happening now" label and calendar links.
• Problem rows: a row with a missing title, or a date or time it can't read, is skipped. The browser console names the row so you can fix it.

Options

Add these as attributes on the <div data-event-schedule> line:

Every label can be changed with data-text-… attributes, for example data-text-mine="Mi agenda". Available labels:

• Filters and search: allDays, search, placeholder, allTracks, track, upcoming, mine
• Result messages: showing, one, reset, empty, emptyMine, loading, error
• Session labels: now, next, featured, star, unstar, details
• Calendar and links: google, ics, tzNote, newTab

Styling

[data-event-schedule] {
  --evs-accent: #1d5fa8;   /* brand color */
  --evs-radius: 6px;       /* corner roundness */
}

Privacy and security

• The schedule loads only your data link, and sends no cookies with it.
• Starred sessions are saved in the visitor's own browser and are never sent anywhere.
• It has no tracking or analytics.
• All spreadsheet text is shown as plain text, and links that aren't web addresses are removed.

Getting help

See INSTALL.md → Troubleshooting. Your purchase includes 6 months of updates and email help with installation.

Version history is in CHANGELOG.md, and license terms are in LICENSE.txt.

Installation

Every install has the same two parts:

1. Your data: a published Google Sheet, rows pasted into the page, or an uploaded CSV file.
2. The snippet: one of the files in embed/, pasted where you want the schedule to appear.

Step 1: Set up a Google Sheet (recommended)

With a Google Sheet, anyone on your team can add or change sessions without touching the website — handy when the schedule shifts the week before the event.

1. Go to sheets.google.com, then File → Import → Upload and choose templates/schedule-template.csv. Or just type the column names into row 1.
2. Replace the example rows with your sessions.
3. Click File → Share → Publish to web.
4. Under Link, choose the sheet tab with your list, change "Web page" to Comma-separated values (.csv), and click Publish.
5. Copy the link it shows. It contains /pub? and ends in output=csv.

Use this link, not the address in your browser bar. A link ending in /edit will not work, and the finder will show a message if you paste one by mistake.

After publishing, changes in the sheet appear on your site within about 5 minutes. Google refreshes published sheets on its own schedule.

Step 2: Add it to your site

Event Schedule works on any website where you can paste HTML. The steps are the same everywhere:

1. Add an HTML / code / embed block where the schedule should appear.
2. Paste the contents of the embed file you chose.
3. Put in your data link, time zone and event name, then publish.

The embed files use the compact script (dist/event-schedule.min.js, about 27 KB). That keeps them under the size limits some builders put on code blocks.

Most builders only run custom code on the published page, not inside the editor. If you see code or a blank box while editing, check the live page.

Any website (HTML)

Put the <div data-event-schedule …> line where the schedule should appear. Then load the script once anywhere on the page:

• Inline: paste the <script>…</script> part of embed file 1.
• From a file: upload dist/event-schedule.min.js and use <script src="event-schedule.min.js" defer></script>.

The CSV must be on the same website or a Google Sheets "Publish to web" link. A CSV on another website only loads if that site allows it (CORS).

Carrd

1. Add an Embed element and set Type to Code.
2. Paste the embed file, then set your link, time zone and event name.
3. Under Style, choose Inline.

Embeds need a Carrd plan that includes them.

Ghost

1. In the post or page editor, type /html to add an HTML card.
2. Paste the embed file, then set your link, time zone and event name.
3. Publish.

Shopify

1. Go to Online Store → Themes → Customize.
2. Open the page template where the schedule should go, for example a "Schedule" page.
3. Click Add section and choose Custom Liquid.
4. Paste the embed file, set your link, time zone and event name, and click Save.

This works with Shopify's Online Store 2.0 themes, such as Dawn and the other free themes Shopify has offered since 2021. If Custom Liquid isn't in the list, your theme is older and doesn't support this method. Email us and we'll help.

Shopify limits a Custom Liquid section to 50 KB. The Google Sheet snippet fits easily. If you paste a long list of rows straight into the snippet and Shopify won't save it, use the Google Sheet option instead.

Squarespace (7.0 and 7.1)

Squarespace runs scripts in Code Blocks only on plans that allow custom code. If your plan doesn't, the block will show the code instead of the schedule.

1. Open the page, click Edit, and add a Code block.
2. Paste the embed file, replacing what's there, then set your link, time zone and event name.
3. Click Apply, then Save.

Webflow

1. Drag a Code Embed element onto the page.
2. Paste the embed file, then set your link, time zone and event name.
3. Click Save & Close, then Publish. The schedule only runs on the published site, not in the Designer.

Code Embed needs a Webflow site plan that allows custom code.

Wix

1. Add Embed Code → Embed HTML.
2. Choose Code, paste the embed file, then set your link, time zone and event name.
3. Resize the box so it's tall enough. Wix shows embeds in a fixed-height frame.

WordPress

Block editor:

1. Add a Custom HTML block.
2. Paste the embed file, set your link and click Update.

Uploading your own files:

1. Upload dist/event-schedule.min.js and your CSV through Media → Add New. If your site blocks .js uploads, use the Google Sheet option instead.
2. Copy each file's URL.
3. Put them into embed/3-hosted-file-embed.html, and paste that into a Custom HTML block.

Some security plugins strip scripts from posts. If the block shows nothing on the live page, use a "header and footer scripts" plugin to load the script.

Two schedules on one page

Add data-url-key with a different value to each one, for example data-url-key="spring" and data-url-key="fall", so their saved filters don't mix. Each can use its own data-src.

Troubleshooting

Changelog

1.0.0 (2026-10-15)

First release.

• Works on any website: install guides for Carrd, Ghost, Shopify, Squarespace, Webflow, Wix, WordPress and plain HTML, plus a compact script for embed blocks.
• Data: Google Sheets ("Publish to web" CSV), CSV file, or rows pasted into the page. Reads common date and time formats.
• Browsing:
  • day tabs that open on today's date during the event
  • sessions grouped by start time
  • track filter with a color per track
  • search across titles, speakers, rooms and descriptions
• Live labels: "Happening now" and "Up next", plus an "Upcoming only" filter, all in the event's time zone.
• Visitor tools:
  • "My schedule" stars, saved in the visitor's browser
  • add to Google Calendar or download an .ics file for each session
  • shareable links for a day, track or search
• Fits into any site: matches the site's fonts and colors, and is shielded from common site-wide styles. Prints cleanly.
• Accessibility and safety:
  • labels, keyboard support and screen-reader announcements
  • all text is escaped and unsafe links are removed