Calendar
A date picker calendar with Hijri calendar support, event markers, and range selection. Perfect for GCC applications requiring dual calendar display.
Preview
November 2025
Installation
Basic Usage
Features
Dual Calendar
Show both Gregorian and Hijri dates simultaneously
Islamic Holidays
Automatic highlighting of 10 major Islamic holidays including Ramadan, Eid al-Fitr, Eid al-Adha, and more
Range Selection
Select single dates or date ranges with visual feedback
Event Markers
Display events with color-coded indicators
Disabled Dates
Disable specific dates or date ranges
Navigation
Previous/next month and quick "Today" button
Bilingual
Full English/Arabic support with RTL layout
Examples
Date Range Selection
Select a start and end date. Click once to set the start, click again to complete the range.
November 2025
With Hijri Dates
Display Hijri dates alongside Gregorian dates. Perfect for Islamic calendar awareness.
November 2025
Jumada al-Thani 1447
Islamic Holidays Highlighting
Automatically highlights 10 major Islamic holidays with event dots and displays holiday names in both English and Arabic. Perfect for GCC region applications.
November 2025
Jumada al-Thani 1447
With Event Markers
Display events with colored indicators. Up to 3 dots shown per day, with a legend below.
November 2025
Events
Disabled Dates
Disable specific dates or use a function to disable date patterns (e.g., weekends).
November 2025
Props
| Name | Type | Default | Description |
|---|---|---|---|
mode | 'single' | 'range' | 'single' | Selection mode: single date or date range |
selected | Date | undefined | Selected date (single mode) |
selectedRange | DateRange | undefined | Selected date range (range mode): { from: Date | undefined, to: Date | undefined } |
onSelect | (date: Date | DateRange | undefined) => void | undefined | Callback when date is selected |
showHijri | boolean | false | Show Hijri dates below Gregorian dates |
showIslamicHolidays | boolean | false | Automatically highlight Islamic holidays (requires showHijri to be true). Displays dots on holiday dates with names in the legend. |
events | CalendarEvent[] | [] | Array of events to display with color indicators |
disabled | Date[] | ((date: Date) => boolean) | undefined | Disabled dates (array or function) |
minDate | Date | undefined | Minimum selectable date |
maxDate | Date | undefined | Maximum selectable date |
locale | 'en' | 'ar' | 'en' | Display locale for month names and weekdays |
getHijriDate | (date: Date) => { hijri: string; hijriDay: string } | undefined | Custom Hijri date provider function |
CalendarEvent Type
DateRange Type
Hijri Calendar Integration
The Calendar component includes a simple Hijri date approximation for demonstration. For production use with accurate Hijri dates, integrate a dedicated library:
Using @formkit/hijri
Install the library: npm install @formkit/hijri
Accessibility
Keyboard Navigation
Calendar dates are keyboard accessible with Tab navigation. Each date button can be activated with Enter or Space.
Focus Management
Clear focus indicators with ring utilities. Today's date is visually distinguished with a bold ring.
Screen Readers
Date values are properly formatted and announced. Disabled dates are marked as disabled in the accessibility tree.
Visual Feedback
Selected dates, ranges, and current day are clearly indicated with color and typography changes.
RTL Considerations
Automatic Layout Adaptation
Navigation buttons automatically flip in RTL mode. Left chevron goes to next month in RTL, previous month in LTR.
Localized Month Names
Month and weekday names use the specified locale (ar-SA or en-US) with proper formatting via toLocaleDateString.
Hijri Date Display
Hijri dates display correctly in both Arabic and English, with proper numeral formatting based on locale.
Event Legend
Event listings adapt to text direction with proper spacing and alignment.