Calendar & Date Picker
Comprehensive calendar interface with Hijri calendar support for Arabic and Islamic contexts. Includes single date selection, date ranges, and integration with Hijri dates.
Hijri Calendar with Islamic Holidays
Calendar displaying both Gregorian and Hijri dates with automatic Islamic holiday highlighting
April 2026
Shawwal 1447
Date Selection
Select a date using the interactive calendar
April 2026
Selected Date (Gregorian)
April 11, 2026
Upcoming Events
Scheduled appointments and events
Team Meeting
November 15, 2025
WorkDoctor Appointment
November 18, 2025
PersonalPresentation
November 22, 2025
WorkSingle Date Picker
Select an appointment or single date
Date Range Picker
Select a date range for events or vacations
Use Cases
Examples of how to use calendar and date pickers in real-world applications
Book Appointment
Allow users to select appointments for medical services or consultations
Features
- Disabled date selection
- Min/max date constraints
- Hijri calendar integration
Components Used
This example uses the following components from the Noor UI library