Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<!-- Free Local Event List widget by haynes lab — https://hayneslab.dev/tools/widgets/local-event-list -->
<script data-hl-config='[{"title":"Farmers Market on Main","date":"2026-08-15","time":"9:00 AM","location":"Main Street Pavilion"},{"title":"Live Jazz Night","date":"2026-08-28","time":"7:30 PM","location":"The Blue Note Lounge","href":"#"},{"title":"Community 5K Fun Run","date":"2026-09-12","time":"8:00 AM","location":"Riverside Park"},{"title":"Fall Craft Fair","date":"2026-10-03","time":"10:00 AM","location":"Town Hall Square","href":"#"}]'>
/*!
* haynes lab — Local Event List widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/local-event-list
*/
(function () {
'use strict';
var PREFIX = 'hlw-local-event-list';
var STYLE_ID = 'hlw-local-event-list-styles';
var MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/local-event-list.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 560px; margin: 0 auto; padding: 24px 24px 30px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
' border: 1px solid #e5e7eb; border-radius: 12px; }' +
'.' + PREFIX + '__title { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: #111827; }' +
'.' + PREFIX + '__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }' +
'.' + PREFIX + '__item { display: flex; align-items: center; gap: 14px; padding: 12px 14px;' +
' border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; }' +
'.' + PREFIX + '__badge { flex: 0 0 54px; width: 54px; padding: 8px 0; border-radius: 8px; text-align: center;' +
' background: var(--hlw-accent); color: #ffffff; line-height: 1.15; }' +
'.' + PREFIX + '__badge-month { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }' +
'.' + PREFIX + '__badge-day { display: block; font-size: 20px; font-weight: 700; }' +
'.' + PREFIX + '__body { min-width: 0; flex: 1; }' +
'.' + PREFIX + '__name { display: block; font-weight: 600; font-size: 15px; color: #111827; text-decoration: none; }' +
'a.' + PREFIX + '__name:hover { color: var(--hlw-accent); text-decoration: underline; }' +
'a.' + PREFIX + '__name:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__meta { font-size: 13px; color: #6b7280; margin-top: 2px; }' +
'.' + PREFIX + '__empty { font-size: 14px; color: #6b7280; margin: 0; }' +
'.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
'@media (max-width: 480px) { .' + PREFIX + ' { padding: 18px 16px 28px; }' +
' .' + PREFIX + '__item { gap: 10px; padding: 10px 12px; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function parseDate(value) {
if (typeof value !== 'string' || !value) return null;
var m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(value.trim());
if (!m) return null;
var d = new Date(+m[1], +m[2] - 1, +m[3]);
return isNaN(d.getTime()) ? null : d;
}
function parseEvents(script) {
var raw = script.getAttribute('data-hl-config');
if (!raw) {
console.warn('[haynes lab local-event-list] Missing required data-hl-config attribute (JSON array of {title, date, time, location, href?}). Nothing rendered.');
return null;
}
var items;
try {
items = JSON.parse(raw);
} catch (e) {
console.warn('[haynes lab local-event-list] data-hl-config is not valid JSON. Nothing rendered.', e);
return null;
}
if (!Array.isArray(items)) {
console.warn('[haynes lab local-event-list] data-hl-config must be a JSON array. Nothing rendered.');
return null;
}
var today = new Date();
today.setHours(0, 0, 0, 0);
var valid = [];
items.forEach(function (ev) {
if (!ev || typeof ev.title !== 'string' || !ev.title) return;
var date = parseDate(ev.date);
if (!date) return;
if (date < today) return; // auto-hide past events
valid.push({ title: ev.title, date: date, time: ev.time, location: ev.location, href: ev.href });
});
valid.sort(function (a, b) { return a.date - b.date; });
return valid;
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
function logoSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(svgNS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
function build(script) {
var events = parseEvents(script);
if (!events) return;
var title = script.getAttribute('data-hl-title') || 'Upcoming Events';
var accent = script.getAttribute('data-hl-accent') || '#f97316';
injectStyles();
var root = el('div', PREFIX);
root.setAttribute('role', 'region');
root.setAttribute('aria-label', title);
root.style.setProperty('--hlw-accent', accent);
root.appendChild(el('h3', PREFIX + '__title', title));
if (!events.length) {
root.appendChild(el('p', PREFIX + '__empty', 'No upcoming events right now — check back soon.'));
} else {
var list = el('ul', PREFIX + '__list');
events.forEach(function (ev) {
var item = el('li', PREFIX + '__item');
var badge = el('div', PREFIX + '__badge');
badge.setAttribute('aria-hidden', 'true');
badge.appendChild(el('span', PREFIX + '__badge-month', MONTHS[ev.date.getMonth()]));
badge.appendChild(el('span', PREFIX + '__badge-day', String(ev.date.getDate())));
item.appendChild(badge);
var body = el('div', PREFIX + '__body');
var name;
if (typeof ev.href === 'string' && ev.href) {
name = el('a', PREFIX + '__name', ev.title);
name.href = ev.href;
} else {
name = el('span', PREFIX + '__name', ev.title);
}
body.appendChild(name);
var metaParts = [ev.date.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })];
if (ev.time) metaParts.push(String(ev.time));
if (ev.location) metaParts.push(String(ev.location));
body.appendChild(el('div', PREFIX + '__meta', metaParts.join(' · ')));
item.appendChild(body);
list.appendChild(item);
});
root.appendChild(list);
}
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/local-event-list';
credit.target = '_blank';
credit.rel = 'noopener';
root.appendChild(credit);
if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
script.insertAdjacentElement('afterend', root);
} else {
document.body.appendChild(root);
}
}
function init() {
var script = findScript();
if (!script) {
console.warn('[haynes lab local-event-list] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>