One calendar. Configured for your page.

Set sources, filters, language, and appearance directly on each widget. No visitor uploads or central source catalogue. These live examples use fictional data.

Full configuration reference · Several events on one day · Display options · Vocabulary checks

1. Copy the embed, then customize its attributes

ACE is configured for https://ace.tools.rpdm.rwth-aachen.de. Replace the source URLs with your feeds. The data-* attributes control this calendar. The objects inside data-sources define each source. Remove optional attributes to use their defaults.

This example uses German, Berlin time, a purple calendar grid, compact cards with 25% larger event text, and a day popup. Keywords are hidden. The blue and green event markers identify the two sources.

<!-- Load these assets once per page, even if you embed several calendars. -->
<link rel="stylesheet" href="https://ace.tools.rpdm.rwth-aachen.de/dist/ace.css">

<!-- Calendar appearance, card content, and controls are configured below. -->
<div class="ace-calendar"
  data-lang="de"
  data-timezone="Europe/Berlin"
  data-theme="auto"
  data-theme-fallback="light"
  data-accent="#7455a3"

  data-view="month"
  data-views="month,week,day,list"
  data-week-numbers="true"

  data-density="compact"
  data-event-font-size="125%"
  data-fields="time,source"
  data-hide="keywords"
  data-max-events-per-day="3"
  data-overflow="popup"

  data-filters="source,type,attendance,venue,dates"
  data-controls="all"
  data-refresh="900"

  data-sources='[
    {
      "id": "research",
      "name": "Research Data Network",
      "url": "https://example.org/calendar.ics",
      "color": "#00549f"
    },
    {
      "id": "campus",
      "name": "Campus Events",
      "url": "/events.json",
      "color": "#247867"
    }
  ]'>
</div>

<script src="https://ace.tools.rpdm.rwth-aachen.de/dist/ace.js" defer></script>

What to change

Keep event types and keywords consistent

ACE merges case and spacing variants automatically. Add data-vocabulary to configure preferred labels, synonyms, and approved misspellings for this page. Enable data-vocabulary-report="true" to review original terms, sources, and possible spelling matches. Unknown terms stay visible until you approve an alias. See the complete vocabulary example and configuration ↗.

Organizations providing feeds should reuse applicable Schema.org event classes and maintain preferred terms and aliases using the SKOS approach. Share the guidance for data providers with them; it includes publishing examples and explains how their vocabulary connects to this page’s configuration.

What belongs inside each source

id is a unique, stable identifier. name is the displayed source label. url points to its feed. color colours its event markers. For example, changing data-accent changes the calendar grid; changing a source's color changes only that source's events.

Each event should supply page_url for its entry on the feed provider's website. ACE uses that page for “Published by”. Supply the linked event or organizer website separately in url or event_url; it appears as an “Event page” button when available. For custom JSON, map pageUrl to the source-entry field. See publishing examples for JSON, iCalendar, and jCal.

data-fields changes cards only. data-hide also hides fields in event popups. To hide the keyword filter, omit keyword from data-filters. Configured filters and complete calendar downloads still use the event data.

data-controls="all" includes the available controls. Embedded calendars hide language and theme switches unless you also set data-language-switch="true" or data-theme-switch="true". Language/theme/share controls require header; sharing also requires data-url-sync="true". Use data-plain="true" to hide the entire header, controls, and sidebar.

Try the layouts, text-size slider, and accent-colour picker ↗. The live calendar below uses the same display settings with bundled fictional feeds.

Try following the host page

This calendar uses data-theme="auto". Switch the surrounding panel's theme below: the calendar follows it, while the second calendar keeps its fixed dark theme. Both calendars use German without language-switch buttons.

Surrounding panel theme LightDarkNo theme (light fallback)

ACE checks the nearest ancestor's data-theme, data-bs-theme, data-color-mode, or light/dark class, then the parent's CSS color-scheme, then data-theme-fallback. Changes to those markers update the calendar automatically. For a site with another theme convention, set a supported marker when its theme changes.

<section data-theme="dark">
  <div class="ace-calendar" data-lang="de"
    data-theme="auto" data-theme-fallback="light"
    data-src="https://example.org/calendar.ics"></div>
</section>

2. A different page, a different configuration

German, dark theme, a custom accent, a list view, and a nested JSON response. Field mappings belong to this source’s configuration. The timestamps in this example are local Berlin time.

<div class="ace-calendar"
  data-lang="de" data-theme="dark" data-accent="#7455a3" data-view="list"
  data-from="2026-09-01" data-to="2026-09-30"
  data-sources='[{
    "id":"local", "name":"Forschungsdaten", "url":"/events.json",
    "itemsPath":"results", "timezone":"Europe/Berlin",
    "mapping":{
      "uid":"identifier", "title":"heading",
      "start":"schedule.begins", "end":"schedule.finishes",
      "location":"place", "type":"kind", "keywords":"topics"
    }
  }]'></div>

3. An iframe or shareable URL

Use repeated src parameters for simple sources, or a JSON-encoded sources parameter for names, colours, and mappings. Combine with type, source, keyword, attendance, venue, q, from, and to.

<iframe title="Upcoming events" loading="lazy"
  src="https://ace.tools.rpdm.rwth-aachen.de/?src=https%3A%2F%2Fexample.org%2Fevents.ics&lang=en&theme=light&view=list"
  style="border:0;width:100%;height:800px"></iframe>

Iframe embeds also hide language and theme switches by default. Define lang=de or lang=en and theme=light or theme=dark in the URL. Automatic theme detection reads the calendar's own document; use the direct embed for live theme updates from your page. A cross-origin iframe cannot inspect its parent page's theme.

The individual event popup includes an .ics download. Source feeds must allow CORS, be hosted on the same origin, or use the optional allowlisted proxy.