Embed configuration

Everything you can set on the Haunts embed tag or in the page URL — views, colors, dark mode, categories, and the styling hooks your theme can reach.

The tag, and where its settings come from

A Haunts calendar is one script and one tag. Paste both into any page on a site listed under Allowed origins in your embed's Setup tab. In Ghost, that means an HTML card.

<script src="https://embed.gethaunts.com/haunts.js" defer></script>
<haunts-calendar embed="your-slug"></haunts-calendar>

The tag needs only your embed's slug. Everything about how the calendar looks — views, color, dark mode, the filter bar, featured events, language — comes from the Setup tab, and a change there reaches every page carrying the tag on its next load. No re-pasting.

Any attribute you add to the tag by hand overrides the dashboard for that one page. Settings resolve in a fixed order: the attribute on the tag wins, then the dashboard, then the built-in default. So one page can run dark while the rest of your site runs light, and a page that must never change can pin every setting it cares about.

The script tag only needs to appear once per page, even with two calendars on it.
Calendars on the free plan show a small Powered by Haunts link above the events. There is no attribute for it; upgrading removes it.

Attributes on <haunts-calendar>

Each attribute matches a Setup-tab setting. Leave it off the tag to follow the dashboard; add it to pin that page.

Attribute	Values	What it does
`embed`	your embed's slug	Required. Which calendar to show. The slug is on the Setup tab, and changing it there breaks every pasted tag.
`view`	a comma-separated list of view names	The first view is the one that opens. Two or more give visitors a view switcher, and a visitor's last pick is remembered in their browser. Views: `list`, `list-image`, `ticket`, `magazine`, `magazine-grid`, `bigcards`, `image-focused`, `month`, `week`, `day`. The switcher always lists them in that order whatever order you write, and unknown names are ignored.
`theme`	a hex color, like `#66298e`	The accent color for date badges, headings, links and buttons.
`dark-mode`	`light`, `dark`, `auto`	`auto` follows each visitor's device setting. Anything else counts as light.
`filters`	`on`, `off`, `open`	`off` hides the filter bar: the search box, the category pills, the ongoing-events toggle and Copy link. The view switcher and the Submit button stay. A category set in the page URL still applies, which is how you build a page for one category with no controls. The category pills normally sit folded behind the funnel button. The Setup tab's Start with the category pills showing checkbox unfolds them on every page; `open` does the same for one page, and `on` pins one page folded even when the checkbox is on. Visitors can still fold or unfold them.
`featured-first`	`true`, `false`, or a heading	Puts featured events in their own section above the list. `true` uses the default heading (Featured, in the embed's language); any other text becomes the heading. Ignored when `featured-only` is on.
`rest-heading`	a heading	A heading over everything below the featured section. Only does anything alongside `featured-first`.
`featured-only`	`true`, `false`	Shows only featured events, in every view. Handy for a don't-miss box on the home page.
`locale`	`en-US`, `en-CA`, `en-GB`, `fr-CA`, `fr-FR`	The language of the calendar's own buttons and labels, and how dates and times are written. Your category names, headings and event text stay as you typed them.
`class="kg-width-wide"`	—	Ghost only, and not a Haunts setting at all: it is the class Ghost themes use for a wide card, so the calendar gets the wide width. The Setup tab's Wide mode checkbox adds it to the copied snippet.

Three worked examples. A dark, Canadian-French calendar that opens in month view and offers list and week as alternatives:

<haunts-calendar embed="your-slug" view="month,list,week" dark-mode="dark" locale="fr-CA"></haunts-calendar>

A featured-only box with no filter bar, for a sidebar:

<haunts-calendar embed="your-slug" view="ticket" featured-only="true" filters="off"></haunts-calendar>

A full events page that starts with the category pills showing, so visitors see what they can filter by without pressing the funnel button:

<haunts-calendar embed="your-slug" filters="open"></haunts-calendar>

Choosing categories from the page URL

The calendar reads a cc-cats token from the address of the page it sits on and starts with those categories selected. That makes filtered links cheap: a nav menu, a link in a post, a whole page for one category.

https://example.com/events/?cc-cats=music
https://example.com/events/?cc-cats=music,open-mic
https://example.com/events/#cc-cats=music

Category names become tokens by lowercasing them and turning runs of anything but letters and digits into a hyphen: Open Mic is open-mic, Kids & Family is kids-family. Renaming a category changes its token, so links you've already shared stop matching. Unknown tokens are ignored.

The query form (?cc-cats=) makes an ordinary link you can paste anywhere.
The hash form (#cc-cats=) works without reloading, so <a href="#cc-cats=music"> links on the calendar page act as instant category tabs. An empty #cc-cats= clears the selection. Other anchors on the page are left alone, and when both forms are present the hash wins.
Two categories from the same group widen the results (either matches); categories from different groups narrow them (all must match). Same rule as clicking the pills.
The URL still applies when the tag says filters="off". Pair the two for a page that shows one category and nothing else.
Visitors get the same links from the filter bar's Copy link button, which appears once a category is selected and copies the page address with ?cc-cats= filled in.

Only categories travel in the URL. Search text, the view and the Uncategorized toggles don't.

Opening one event from a link

A hash of the form #cc-event=<event id> on the page that holds the full calendar opens that event's details in place, and clears itself when the reader closes them. You rarely write one by hand: the mini embed's rows link this way, and so do the links readers copy with Tell a friend, as long as the Setup tab's Full calendar page URL points at the page carrying the calendar. Leave it blank and mini-embed clicks fall back to each event's own page.

The mini embed

A compact digest for sidebars and home pages: a ★ tab of featured events (when there are any), then a tab for each of the next five days, up to eight events per tab. It loads its own, smaller script.

<script src="https://embed.gethaunts.com/haunts-mini.js" defer></script>
<haunts-mini embed="your-slug"></haunts-mini>

Rows link to your full calendar page and open the event there. That page comes from the Setup tab's Full calendar page URL, or from a calendar-url attribute on the tag; with neither, rows go to each event's own page. The mini embed takes theme, dark-mode and locale exactly like the calendar, and nothing else: no views, no filter bar, no featured attributes. It never shows the Powered by Haunts link.

The submission form

With Allow event submissions switched on, the calendar gets a Submit button that points wherever the Setup tab's Submit button URL says. Put the form on that page:

<script src="https://embed.gethaunts.com/haunts.js" defer></script>
<haunts-submit embed="your-slug"></haunts-submit>

The form takes only the slug. Its color, dark mode and language come from the dashboard.

Styling from your theme

The calendar renders inside a shadow root, so your theme's CSS doesn't leak in and the calendar's doesn't leak out. Your stylesheet can still reach named parts of it with ::part(). A few things people do with it:

/* Hide one category's pill on this site (categories are per site, not per embed) */
haunts-calendar::part(pill-open-mic),
haunts-calendar::part(filter-pill-open-mic) { display: none; }

/* Hide a whole category group, label and pills, on cards and in the filter bar */
haunts-calendar::part(type-audience),
haunts-calendar::part(filter-type-audience) { display: none; }

/* Set the featured heading in your display face */
haunts-calendar::part(featured-heading) { font-family: Lora, serif; }

Category parts use the same tokens as URL filters (the name, lowercased and hyphenated), and renaming a category changes them. Each element also carries a family name, so you can style every member at once:

Where	Family	One item
Category pill on a card	`category-pill`	`pill-<name>`
Category group on a card (label and pills)	`category-type`	`type-<name>`
Category group label on a card	`category-type-label`	`type-label-<name>`
Category pill in the filter bar	`category-filter-pill`	`filter-pill-<name>`
Category group in the filter bar	`category-filter-type`	`filter-type-<name>`
Category group label in the filter bar	`category-filter-type-label`	`filter-type-label-<name>`

The other named parts, by area:

Featured: featured-section, featured-heading, rest-heading, featured-badge, featured-card, featured-arrow, featured-dot.
Filter bar: filter-toggle (plus filter-toggle-open), filter-toggle-badge, view-switcher, view-button (plus view-button-active), ongoing-toggle, ongoing-toggle-label, copy-link.
Cards: date-badge-container, ongoing-label, multiple-dates, title-string, venue-string, location-string, source-string, from-label, until-label, card-overlay-container, overlay-text-container, title-container, category-pills-container. Not every view renders every part.
Event details: when-line, dates-section, date-option.
Calendars: month-nav, month-grid, month-more, week-nav, week-grid, week-more, day-nav, day-prev, day-next, day-today, day-pick, day-title.
Mini embed: mini-tabs, mini-tab (plus mini-tab-selected and mini-tab-featured), mini-row, mini-footer-link.

What stays in the dashboard

Some settings have no attribute, on purpose, because they belong to the calendar rather than to a page. Set these on the Setup tab:

Allowed origins — the sites the embed will load on. A tag on any other host shows nothing.
Forward horizon — how far ahead the calendar looks.
Cancelled events — whether events a calendar marked cancelled appear at all.
Submissions — on or off, and where the Submit button points.
Full calendar page URL — where the mini embed and shared links send readers.
The RSS feed — a setting on the embed, not on the tag.

Which haunts feed the calendar, and which of their categories, is chosen per haunt in the dashboard. Which events are featured is decided there too; the tag only decides how they're shown.