Calendar & Date Picker
Comprehensive calendar interface with Hijri calendar support for GCC markets. 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
January 2026
Rajab 1447
Events
Date Selection
Select a date using the interactive calendar
January 2026
Selected Date (Gregorian)
January 12, 2026
Upcoming Events
Scheduled appointments and events
Team Meeting
November 15, 2025
Doctor Appointment
November 18, 2025
Presentation
November 22, 2025
Single 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