CalendarDayHeader

Stable
WCAG 2.2 evidence
RTL

Column heading of a week or day view: the weekday and the day number, the number in a brand circle for today. Presentational: renders in React Server Components, no React Aria. The visible weekday and number are hidden from assistive technology and replaced by one text with the whole date ("Wednesday, October 14, 2026, today"), so the header is named by its full date (WCAG 1.3.1). Today is also exposed with aria-current="date" and is shown by a filled circle as well as colour (1.4.1). The element has no role of its own: pass role="columnheader" when it sits in a role="row" of a role="grid". Consumer duties: time zone of date, and isToday (see the prop).

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

Loading example…

7
examples: 6
props: 3
live controls: 1
platform: 5
WCAG criteria: 1
block uses 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…

isTodayfalse

isWeekendfalse

weekdayStyle

Generated code

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

<CalendarDayHeader />

Examples 6

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

Today

Figma State=Today: the number in a brand circle, the weekday in brand text, announced as "today".

Loading example…

app.tsx

import { CalendarDate } from "@internationalized/date";
import { CalendarDayHeader } from "@nexera-ui/react";

const wednesday = new CalendarDate(2026, 10, 14);

<CalendarDayHeader date={wednesday} locale="en-US" />;

Weekend

Figma State=Weekend: muted weekday and number, derived from the date and the locale.

Loading example…

app.tsx

import { CalendarDate } from "@internationalized/date";
import { CalendarDayHeader } from "@nexera-ui/react";

const wednesday = new CalendarDate(2026, 10, 14);

<CalendarDayHeader date={wednesday} locale="en-US" />;

Weekday styles

weekdayStyle sizes the weekday name: narrow for tight columns, long when there is room.

Loading example…

app.tsx

import { CalendarDate } from "@internationalized/date";
import { CalendarDayHeader } from "@nexera-ui/react";

const wednesday = new CalendarDate(2026, 10, 14);

export function WeekdayStyles() {
  return (
    <div className="flex flex-wrap gap-4">
      {(["narrow", "short", "long"] as const).map((weekdayStyle) => (
        <div key={weekdayStyle} className="w-35">
          <CalendarDayHeader date={wednesday} locale="en-US" weekdayStyle={weekdayStyle} />
        </div>
      ))}
    </div>
  );
}

Week view

The week view's head row. The row scrolls inside its own container on a narrow screen (a data surface), so 320 px reflow does not apply.

Loading example…

app.tsx

import { CalendarDate } from "@internationalized/date";
import { type ReactNode } from "react";
import { CalendarDayHeader } from "@nexera-ui/react";

function Week({
  locale,
  today,
  children,
}: {
  locale: string;
  today: number;
  children?: ReactNode;
}) {
  return (
    <div role="grid" aria-label="Week of 12 October 2026" className="min-w-[44rem]">
      <div role="row" className="flex">
        {Array.from({ length: 7 }, (_, index) => {
          const date = new CalendarDate(2026, 10, 12 + index);
          return (
            <div key={index} className="min-w-0 flex-1">
              <CalendarDayHeader
                role="columnheader"
                date={date}
                locale={locale}
                isToday={date.day === today}
              />
            </div>
          );
        })}
      </div>
      {children}
    </div>
  );
}

export function WeekView() {
  return <Week locale={args.locale ?? "en-US"} today={14} />;
}

Right to left

Right-to-left (Arabic, Egypt): Arabic digits and weekday names, the week starts on Saturday and Friday and Saturday are the weekend.

Loading example…

app.tsx

import { CalendarDate } from "@internationalized/date";
import { type ReactNode } from "react";
import { CalendarDayHeader } from "@nexera-ui/react";

function Week({
  locale,
  today,
  children,
}: {
  locale: string;
  today: number;
  children?: ReactNode;
}) {
  return (
    <div role="grid" aria-label="Week of 12 October 2026" className="min-w-[44rem]">
      <div role="row" className="flex">
        {Array.from({ length: 7 }, (_, index) => {
          const date = new CalendarDate(2026, 10, 12 + index);
          return (
            <div key={index} className="min-w-0 flex-1">
              <CalendarDayHeader
                role="columnheader"
                date={date}
                locale={locale}
                isToday={date.day === today}
              />
            </div>
          );
        })}
      </div>
      {children}
    </div>
  );
}

export function RightToLeft() {
  return <Week locale="ar-EG" today={14} />;
}

Narrow container

In a narrow column the narrow weekday keeps the header on one line; it never overflows its container.

Loading example…

app.tsx

import { CalendarDate } from "@internationalized/date";
import { CalendarDayHeader } from "@nexera-ui/react";

const wednesday = new CalendarDate(2026, 10, 14);

<div className="max-w-16 border border-dashed border-default">
  <CalendarDayHeader date={wednesday} locale="en-US" weekdayStyle="narrow" isToday />
</div>;

Props 6

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

date*Nexera

DateValue

The day this header shows (an @internationalized/date CalendarDate, for example parseDate("2026-10-14")). The weekday name and the day number are both derived from it for the locale, with its digits, so no text is written by hand.

localeNexera

string

BCP 47 locale for the weekday, the digits and the weekend days (for example ar-EG). Pass the same locale on the server and in the browser: without it the runtime locale is used, and server and browser can differ.

isTodayNexera

boolean

The day is today: a filled brand circle around the number and a brand weekday, announced as "today". Not derived from the clock on purpose: "today" depends on the viewer's time zone and a server render would freeze it. Compute it where the time zone is known, for example isToday(date, getLocalTimeZone()) from @internationalized/date.

isWeekendNexera

boolean

The day is a weekend day: muted weekday and number. Derived from date and the locale (Saturday and Sunday in en-US, Friday and Saturday in ar-EG); pass it to follow your own work week.

weekdayStyleNexera

"narrow" | "short" | "long"

Length of the visible weekday name. short is the Figma "Wed"; use narrow in tight columns and long when there is room.

todayLabelNexera

string

Text announced after the full date on today's header. Translate it for your locale.

* 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

2 direct · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.4Resize TextLevel AA · supporting test
1.4.10ReflowLevel 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:.

Usage

<CalendarDayHeader className="shadow-sm" />

Used in blocks

Week calendarScheduling and calendar

Theme studio

CalendarDayHeader

Try every prop. Copy the code.

Examples 6

Today

Weekend

Weekday styles

Week view

Right to left

Narrow container

Props 6

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components