Solid

Two packages: @taqwim/solid for behaviour and accessibility with no styles, and @taqwim/solid-styled for a calendar that already looks like one.

Both are thin bindings to @taqwim/calendar-core. The state machine does the work; this package translates it into Solid.

Live

Rendered by @taqwim/solid-styled on this page — not a recording, and not a different framework wearing this one’s name.

ThemeHijri calendarSizeLanguageText direction Select multiple dates Show Gregorian dateEmphasize

Calendar for Jumada al-awwal 1448

Selectednothing yet

Tab into the grid, then use the arrow keys, Home/End, PageUp/PageDown (with Shift for years) and Enter to select. Under dir="rtl" the horizontal keys mirror.

Hijri calendarDate formatLanguage Allow typing Show Gregorian dateEmphasizeInput shows

Selectednothing yet

With editable on, the input accepts 1446-09-01 or 01/09/1446. Text it cannot parse reverts to the last good value rather than clearing the selection. The trigger is a combobox: Enter opens the popup, Escape closes it and returns focus.

Custom date picker trigger

renderTrigger keeps your trigger mounted while its date text and open state update. Read trigger.value and trigger.isOpen inside JSX; destructuring these properties in the callback captures their initial values.

trigger.open opens the calendar and moves focus to a day. Escape and keyboard selection return focus to the trigger.

import { HijriDatePicker } from '@taqwim/solid-styled'

;<HijriDatePicker
  renderTrigger={trigger => (
    <button type="button" aria-haspopup="dialog" aria-expanded={trigger.isOpen} onClick={trigger.open}>
      {trigger.value || 'Choose date'}
    </button>
  )}
/>

Full reference

The package README is the reference for this adapter and is kept next to the code so the two cannot drift:

packages/solid/README.md — the headless primitives, every prop, the keyboard model
packages/solid-styled/README.md — the themed components

Common ground

Whatever the framework, the rendered DOM is the same. See Data attributes for the contract, and Theming for how one stylesheet covers all five.

The option names are the same too — see Calendar options. The calendarSystem option selects Umm al-Qura, Islamic Civil or Islamic TBLA. Porting an example between frameworks is a matter of syntax, not of behaviour.