Event

When to use

Reach for event whenever you need the exact same compact, colored, titled, and timed indicator scheduler itself uses for an event, such as a small agenda widget on a dashboard, a list of upcoming appointments outside a full calendar grid, or a notification. It's deliberately minimal: only a title and a start time are ever shown, even when more is known about the event, such as a description, location, notes, or priority, since those live in the event editor instead. Turn on its hide-time mode to drop even the time line, showing just the title, the same as what scheduler itself does for all-day events, which have no single time to show, and for any block too short to fit two lines legibly. It renders as a real button internally, so it's natively focusable and activatable with the keyboard, and listens for a plain click.

See Scheduler: Building your own scheduler for a complete example composing this chip and the event editor into a calendar UI of your own, rather than using the full scheduler as a whole.

Install & usage

npm install @eunomia/elements

import "@eunomia/elements/scheduler-event.js";

<eun-scheduler-event
  id="chip"
  label="Design review"
  color="purple"
></eun-scheduler-event>

<script>
  const chip = document.querySelector("#chip");
  chip.start = new Date(2026, 2, 16, 11, 0);
  chip.end = new Date(2026, 2, 16, 12, 0);
  chip.addEventListener("click", () => {
    // open your own detail view, or pass the same event into
    // eun-scheduler-event-editor to edit it
  });
</script>

start/end are Date properties (attribute: false, like every date value elsewhere in this library), so set them from JavaScript, not as HTML attributes.

Live testing

Properties

Colors

Six accent colors, from the library's decorative token scale; set directly as color, no other configuration needed.

<eun-scheduler-event label="Red" color="red"></eun-scheduler-event>
<eun-scheduler-event label="Purple" color="purple"></eun-scheduler-event>
<eun-scheduler-event label="Yellow" color="yellow"></eun-scheduler-event>
<eun-scheduler-event label="Blue" color="blue"></eun-scheduler-event>
<eun-scheduler-event label="Green" color="green"></eun-scheduler-event>
<eun-scheduler-event label="Pink" color="pink"></eun-scheduler-event>

Variants

default (the initial value) mixes color toward the current theme's own surface color for an opaque tint that stays light in a light theme and dark in a dark one automatically, with no extra configuration needed. transparent mixes the same accent toward transparent instead, for a lighter touch over a colored or patterned background. Ghost does not set a background color.

<eun-scheduler-event
  label="Default"
  color="blue"
  variant="default"
></eun-scheduler-event>
<eun-scheduler-event
  label="Transparent"
  color="blue"
  variant="transparent"
></eun-scheduler-event>
<eun-scheduler-event
  label="Ghost"
  color="blue"
  variant="ghost"
></eun-scheduler-event>

Direction

column (the initial value) stacks the title above the time on two lines, which is what the calendar's hour grid uses for most views. row lays them out side by side on one line instead, truncating the title with an ellipsis while the time never does, which is what month view switches to for a single-day chip on desktop, where a cell is wide but not tall.

<eun-scheduler-event
  label="Column layout"
  color="green"
  direction="column"
></eun-scheduler-event>
<eun-scheduler-event
  label="Row layout, with a longer title to show truncation"
  color="green"
  direction="row"
></eun-scheduler-event>

Hiding the time

For an all-day event (no single time to show), or any block too short to comfortably fit a title line and a time line both, eun-scheduler sets this automatically in its own all-day row and in condensed hour-grid and month-view cells. Set it directly when using the chip on its own.

<eun-scheduler-event
  label="Company offsite"
  color="purple"
  hide-time
></eun-scheduler-event>

Popover

eun-scheduler-event never opens anything itself, since clicking it only fires a plain click, same as any other button (see "When to use" above). "Open your own detail view" is exactly what's built below: a small popover of your own, reusing the library's own tokens so it matches the visual language of eun-scheduler's own read-only detail popover without pulling in the whole calendar, down to its priority row (a priority_high icon prefix, same as every other detail row, next to a eun-tag using severity for the color and hide-icon since the row icon already marks it) and shared guest list (a status icon, check/hourglass/cross for confirmed/pending/declined, next to each email). Click the event to open it, its own close (✕) button (or Escape) to dismiss it.

<eun-scheduler-event
  id="chip"
  label="Design review"
  color="purple"
></eun-scheduler-event>
<div id="popover" popover style="position: fixed;">
  <eun-button id="close" appearance="ghost" rounded size="s" aria-label="Close">
    <eun-icon name="close" size="16"></eun-icon>
  </eun-button>
  <span>Design review</span>
  <p>Friday, August 14 · 11:00 AM – 12:00 PM</p>
  <p>Room A</p>
  <p>
    <eun-icon name="priority_high" size="16"></eun-icon>
    <eun-tag size="s" hide-icon color="primary" severity="warning"
      >High priority</eun-tag
    >
  </p>
  <ul>
    <li data-status="confirmed">✓ alice@example.com</li>
    <li data-status="pending">⏳ bob@example.com</li>
  </ul>
</div>

<script>
  const chip = document.querySelector("#chip");
  const popover = document.querySelector("#popover");
  chip.start = new Date(2026, 2, 16, 11, 0);
  chip.end = new Date(2026, 2, 16, 12, 0);
  chip.addEventListener("click", () => {
    const rect = chip.getBoundingClientRect();
    popover.style.top = `${rect.bottom + 4}px`;
    popover.style.left = `${rect.left}px`;
    popover.showPopover();
  });
  document
    .querySelector("#close")
    .addEventListener("click", () => popover.hidePopover());
</script>

See Scheduler: Event details in the popover for eun-scheduler's own full popover, which adds every optional field (notes, priority, all-day) plus its Edit/Delete buttons, shown side by side inside a real calendar.

Keyboard interactions

Aria attributes and rules

• Renders as a native <button type="button"> internally, so focus, activation, and the disabled/focus-visible states all come from the platform rather than being reimplemented.
• aria-label combines the title and time ("{title}, {time}", or "{title}, {start} – {end}" once end is also set), even though only the title and start time are ever shown visually (and neither once hide-time is set), so a screen reader user still gets the full picture a sighted user would need to hover or open the event to learn.
• The color bar is a plain <span aria-hidden="true">, since color is never the only signal carrying meaning here, given the title/time text is always present too.