pnpm add @wandercom/design-system-web

EventBar fills its container, so position and size it with a wrapper that spans the event's time range. Its label truncates with an ellipsis when the bar is too short for it.

import { EventBar } from '@wandercom/design-system-web/ui/event-bar';

export function Example() {
  return (
    <div className="absolute h-[26px]" style={{ left: 120, width: 220 }}>
      <EventBar tone="info" onClick={() => {}}>
        Maintenance
      </EventBar>
    </div>
  );
}

Each tone is an opaque tint of its semantic color over the surface, so grid lines and weekend shading never show through, with a 2px accent edge on the leading side:

• neutral for ordinary stays
• info, success, warning and error for the categories a calendar distinguishes, such as maintenance, marketing, owner stays and blocks

cancelled outlines the bar and strikes its label through in the secondary text color, whatever its tone.

<EventBar cancelled>Cancelled stay</EventBar>

Pass icon for a leading icon; it is sized to the bar. With asChild, the child element (for example a link) becomes the bar:

<EventBar asChild icon={<IconKey />} tone="warning">
  <a href="/reservations/123">Owner stay</a>
</EventBar>