Calendar

Code

import { Calendar } from "@fadymondy/nasaq/web";import { useState } from "react";export function Example() {  const [day, setDay] = useState<Date | null>(null);  return <Calendar value={day} onValueChange={setDay} />;}

Pickers · beta

Live examples and controls: Calendar in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/calendar.json

An always-visible month grid for choosing one day (mode="single") or a range (mode="range"). It has no dependency beyond the browser: month, weekday and day labels come from Intl.DateTimeFormat through Nasaq's formatDate, so they follow the active locale and use the Nasaq digit set (Western digits, also in Arabic). The first day of the week comes from the locale (Intl.Locale week info), or from weekStartsOn.

When to useCopy Anchor Link

• A date or range that is best chosen by looking at the month.
• Inline scheduling views. For a form field, use the DatePicker, which puts this calendar in a popover.

When not to useCopy Anchor Link

• Typing a known date (birthday): use a text Input.
• A time of day: use TimePicker from date-picker.

ImportCopy Anchor Link

import { Calendar } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { Calendar } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Example() {
  const [day, setDay] = useState<Date | null>(null);
  return <Calendar value={day} onValueChange={setDay} />;
}

AnatomyCopy Anchor Link

Calendar                      data-slot="calendar"  data-mode="single|range"
  month (one or two)          data-slot="calendar-month"
    header: prev, title, next data-slot="calendar-title"
    table role="grid"         data-slot="calendar-grid"
      th (weekday) / td role="gridcell" > button[data-date]

APICopy Anchor Link

DateRange is { from: Date | null; to: Date | null }. useCalendarLocale({ locale?, dir? }) returns { locale, rtl, dir } using the same resolution rules.

ExamplesCopy Anchor Link

import { Calendar, type DateRange } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Booking() {
  const [range, setRange] = useState<DateRange>({ from: null, to: null });
  return (
    <Calendar
      mode="range"
      numberOfMonths={2}
      min={new Date()}
      disabled={(d) => d.getDay() === 5}
      value={range}
      onValueChange={setRange}
    />
  );
}

import { Calendar } from "@fadymondy/nasaq/web";

export function Hijri() {
  return <Calendar locale="ar-SA" calendar="islamic-umalqura" />;
}

AccessibilityCopy Anchor Link

Each month is a role="grid" with a roving tabindex: one day is in the tab order. Day buttons carry the full date as aria-label; today has aria-current="date"; selected cells have aria-selected.

Localise previousMonthLabel and nextMonthLabel for languages other than English and Arabic.

RTL & i18nCopy Anchor Link

The grid, header and chevrons mirror with the direction; the previous/next chevrons swap icons in RTL. Month and weekday names are Arabic in an Arabic locale; digits stay Western, like Num and DateTime. Week start follows the region (ar-EG starts Saturday, ar-SA Sunday).

Styling & tokensCopy Anchor Link

Uses bg-primary, bg-nq-selected (range band), bg-nq-hover, border-nq-focus (today) and outline-nq-focus. Target data-selected, data-today, data-outside, data-disabled on day buttons and data-in-range on cells. Extend with className on the root.

Do / Don'tCopy Anchor Link

• Do set min/max rather than validating after the fact.
• Don't switch to Arabic-Indic digits here; the system uses Western digits.

RelatedCopy Anchor Link

• DatePicker
• Popover
• Numeric

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-pickers-calendar--docs