CalendarEvent

Stable
WCAG 2.2 evidence
RTL

An event in a month cell, a time grid or a list: Type x Layout. Built on React Aria Button (or Link with href), so it is always a focusable control with Enter and Space (Enter on links), a visible focus ring and a pointer target that fills the chip (WCAG 2.1.1, 2.4.7, 4.1.2). The accessible name is the whole event ("Standup, 09:00 to 09:30, Tuesday 3 March, Tentative"): title, time, day and category, with the day and time written by Intl.DateTimeFormat in the provider's locale (1.3.1). The visible title and time are inside the name (2.5.3). A title that is not text (elements) cannot be flattened, so then the name is built from the content plus text visible only to assistive technology. The category is also carried by dot, icon, dashed outline or strike-through, never by colour alone (1.4.1). Use it as the child of an EventPopover to open the event's details. Consumer duties: pass start (and end, timeZone) so the name has its date, wording of titles, and a detail view for titles the one-line chip truncates.

import { CalendarEvent } from "@nexera-ui/react";

Loading example…

9
examples: 33
props: 4
live controls: 1
platform: 11
WCAG criteria: 3
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

title

layout

isAllDayfalse

isDisabledfalse

Generated code

import { CalendarEvent } from "@nexera-ui/react";

<CalendarEvent />

Examples 8

The same examples as Storybook, rendered live. Open Code to copy one.

With time

time draws the Figma Time text beside the title. It replaces the time derived from start and end.

Loading example…

app.tsx

import { CalendarEvent } from "@nexera-ui/react";

<CalendarEvent
  title="1:1 Sara and Ayesha"
  start={new Date("2026-03-03T06:00:00Z")}
  end={new Date("2026-03-03T06:30:00Z")}
  timeZone="Asia/Karachi"
/>;

Block

Figma Layout=Block: the title above the time, 160 x 56 px, for time grids. The time is derived from start and end.

Loading example…

app.tsx

import { CalendarEvent } from "@nexera-ui/react";

<div className="h-14 w-40">
  <CalendarEvent
    title="1:1 Sara and Ayesha"
    start={new Date("2026-03-03T06:00:00Z")}
    end={new Date("2026-03-03T06:30:00Z")}
    timeZone="Asia/Karachi"
    layout="block"
  />
</div>;

As link

With href the event is a link (an <a>), with the same name and look; Enter follows it.

Loading example…

app.tsx

import { CalendarEvent } from "@nexera-ui/react";

<CalendarEvent
  title="1:1 Sara and Ayesha"
  start={new Date("2026-03-03T06:00:00Z")}
  end={new Date("2026-03-03T06:30:00Z")}
  timeZone="Asia/Karachi"
/>;

Disabled

isDisabled: not focusable and not pressable (an event the viewer cannot open).

Loading example…

app.tsx

import { CalendarEvent } from "@nexera-ui/react";

<CalendarEvent
  title="1:1 Sara and Ayesha"
  start={new Date("2026-03-03T06:00:00Z")}
  end={new Date("2026-03-03T06:30:00Z")}
  timeZone="Asia/Karachi"
/>;

Long title

A long title is one line with an ending ellipsis; the whole title stays in the accessible name and the detail view shows it.

Loading example…

app.tsx

import { CalendarEvent } from "@nexera-ui/react";

<CalendarEvent
  title="Quarterly planning session with the whole payroll and benefits team"
  start={new Date("2026-03-03T06:00:00Z")}
  end={new Date("2026-03-03T06:30:00Z")}
  timeZone="Asia/Karachi"
  time="11:00 to 11:30"
/>;

Opens event popover

The event as the trigger of an EventPopover: it gets aria-expanded and aria-controls, and focus returns to it when the popover closes. Press it, or Tab to it and press Enter.

Loading example…

app.tsx

import { CalendarEvent, EventPopover } from "@nexera-ui/react";

export function OpensEventPopover() {
  return (
    <EventPopover
      title="1:1 Sara and Ayesha"
      when="Tuesday 3 March  ·  11:00 to 11:30"
      meta="Does not repeat  ·  Pakistan Standard Time"
      location="Lahore HQ, Room Margalla"
      placement="bottom start"
    >
      <CalendarEvent
        title="1:1 Sara and Ayesha"
        start={new Date("2026-03-03T06:00:00Z")}
        end={new Date("2026-03-03T06:30:00Z")}
        timeZone="Asia/Karachi"
      />
    </EventPopover>
  );
}

Right to left

Right-to-left: the dot or icon moves to the start (right) and the title truncates at the end; the Arabic labels are translated.

Loading example…

app.tsx

import { CalendarEvent } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div className="flex max-w-45 flex-col gap-2">
      <CalendarEvent
        title="1:1 Sara and Ayesha"
        start={new Date("2026-03-03T06:00:00Z")}
        end={new Date("2026-03-03T06:30:00Z")}
        timeZone="Asia/Karachi"
      />
      <CalendarEvent
        title="إجازة سنوية"
        type="out-of-office"
        labels={{ outOfOffice: "خارج المكتب" }}
      />
    </div>
  );
}

Narrow container

In a narrow container the chip shrinks and the title truncates; it never overflows.

Loading example…

app.tsx

import { CalendarEvent } from "@nexera-ui/react";

<div className="max-w-24 border border-dashed border-default">
  <CalendarEvent
    title="1:1 Sara and Ayesha"
    start={new Date("2026-03-03T06:00:00Z")}
    end={new Date("2026-03-03T06:30:00Z")}
    timeZone="Asia/Karachi"
    time="11:00 to 11:30"
  />
</div>;

Props 33

Press "Try it" on a card to load that prop into the playground.

hrefNexera

string

No destination: the event is a button. Destination of the event page; the event becomes a link.

title*Nexera

ReactNode

Event title. One line with an ending ellipsis, whole in the accessible name. Keep it short; the detail view shows the rest.

typeNexera

Category. Shown by fill, stroke, a dot or an icon, and also announced as text; tentative is dashed and declined is struck through, so no category is carried by colour alone (WCAG 1.4.1).

layoutNexera

"compact" | "block"

Size and layout: compact is one line for month cells (180 x 20 px), block is a taller block for time grids (160 x 56 px, the title above the time).

startNexera

Date

When the event starts (an instant). It gives the accessible name its day ("Tuesday 3 March") and, with end, its time, and the block layout and time derive their text from it. Without it the name has no date: pass it.

endNexera

Date

When the event ends (an instant). With start it makes the time range "11:00 to 11:30".

timeZoneNexera

string

IANA time zone the times and the day are read in (for example Asia/Karachi). Without it the viewer's time zone is used, which differs between server and browser: pass it for server-rendered calendars.

isAllDayNexera

boolean

The event lasts all day (shown as the "All day" text and no clock times). Always true for type="all-day".

timeNexera

string

Visible time text. Shown when provided; replaces the text derived from start and end. In the compact layout nothing is shown unless this is set; the block layout shows the derived time. The time is read in the accessible name either way.

labelsNexera

Partial<CalendarEventLabels>

Translate the words added to the accessible name and the "All day" text.

isDisabledNexera

boolean

Disabled (not focusable, not pressable): for events the viewer cannot open.

classNameNexera

string

Extra classes for the event, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the event.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

formReact Aria

string

The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form).

nameReact Aria

string

Submitted as a pair with the button's value as part of the form data.

valueReact Aria

string

The value associated with the button's name when it's submitted with the form data.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

targetReact Aria

HTMLAttributeAnchorTarget

The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

relReact Aria

string

The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

hrefLangReact Aria

string

Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

downloadReact Aria

string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

pingReact Aria

string

A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

referrerPolicyReact Aria

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

routerOptionsReact Aria

never

Options for the configured client side router.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

6 direct · 5 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.3Contrast (Minimum)Level AA · supporting test
1.4.4Resize TextLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.4.11Focus Not Obscured (Minimum)Level AA · supporting test
2.5.3Label in NameLevel A · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-pressed

Usage

<CalendarEvent className="data-disabled:opacity-90 shadow-sm" />

Theme studio

CalendarEvent

Try every prop. Copy the code.

Examples 8

With time

Block

As link

Disabled

Long title

Opens event popover

Right to left

Narrow container

Props 33

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components