To add Hijri dates to your app, store every time in the database in UTC on the Gregorian calendar, and convert to Hijri only for display, using the Umm al-Qura calendar that is official in Saudi Arabia, showing both dates where useful. Prayer times are calculated from location with the locally accepted method, and the start of Ramadan and Eid depends on moon sighting, so make them admin-editable settings rather than dates hard-coded in your app. Ramadan hours need opening-hour schedules that support periods running past midnight.
- how to add hijri date to app
- umm al qura calendar javascript
- prayer times in app development
- ramadan opening hours booking system
- show hijri and gregorian date together
- ar-SA locale shows hijri date
How do you add Hijri dates to your app the right way?
Adding Hijri dates to an app looks like a simple formatting question, but it is really a data design decision. The golden rule: store every date and time on the Gregorian calendar in UTC, and convert to Hijri only for display, using the Umm al-Qura calendar that is official in Saudi Arabia. Bookings, reports and invoices stay accurate, and users see dates in the form they are used to.
In the Gulf, three rhythms live side by side in a user's day: the Hijri calendar for religious occasions and some official documents, the Gregorian calendar for salaries and business, and the rhythm of prayer and Ramadan that reshapes working and shopping hours. An app that respects this rhythm feels made for its users; one that ignores it feels foreign even in Arabic. It is part of Arabic-first UX.
Store time once, precisely, and show it every way the user needs.
How do you store and display dates without bugs?
| Case | What to store | What to show |
|---|---|---|
| Booking, order or payment | The moment in UTC | Local time, with Hijri and Gregorian dates per user preference |
| Date of birth from a Saudi ID | The date as entered with its calendar type, plus the Gregorian equivalent | The date in the calendar the user entered |
| Annual Hijri occasion (Eid offer) | Hijri month and day, plus a Gregorian date confirmed by an admin each year | The occasion's date in both calendars |
| Annual contract or subscription | Start and end dates in Gregorian, noting if the contract is Hijri-based | Both dates, stating which calendar governs the term |
| Opening hours | Local times for each weekday, plus special schedules for Ramadan and Eid | Today's hours and an Open now status |
Also remember that a Hijri year is about 11 days shorter than a Gregorian year. A one-Hijri-year subscription and a one-Gregorian-year subscription are not the same, so tell users which calendar governs the term and renewal, especially for rentals and contracts.
Where do users actually need Hijri dates?
- Booking date pickers: showing the Hijri date under the Gregorian one helps people plan around occasions like the third day of Eid.
- Personal data forms: some Saudi documents show the date of birth in Hijri, so allow entry in either calendar.
- Invoices and receipts: showing both dates helps customers and companies, while Gregorian stays the accounting basis.
- Reminder messages: Your appointment is Thursday 10 Ramadan is clearer to many people during Ramadan than a Gregorian date alone.
- Religious and education apps: Quran circles, Umrah and voluntary fasting run primarily on Hijri dates.
- Seasonal reports: comparing this Ramadan's sales with last Ramadan's needs Hijri alignment, not Gregorian.
Ramadan and Eid: why not hard-code them?
The start of Ramadan, Eid al-Fitr and Eid al-Adha is announced based on moon sighting, and can differ by a day from astronomical calculation or a printed calendar. So do not hard-code these dates. Make them settings in your admin dashboard that an admin confirms when the official announcement comes, with an expected date used for planning ahead.
- 1Create a seasons table
For each season: name, expected start and end dates, and a Confirmed or Expected status.
- 2Link settings to seasons
Opening hours, delivery windows, offers and message templates switch automatically when a season starts.
- 3Confirm on announcement
On the night of the sighting, the admin taps Confirm or shifts the day, and every linked setting updates.
- 4Test the switch
In a staging environment, try moving the season a day earlier or later: existing bookings, offers and scheduled messages.
Seasons are not only Ramadan and the two Eids. Saudi Arabia has Founding Day (22 February) and National Day (23 September), and the UAE has Eid Al Etihad (2 December), all on fixed Gregorian dates. A good seasons system supports both kinds. For marketing prep, see the Ramadan readiness checklist for Saudi stores and the UAE Ramadan e-commerce checklist.
Ramadan hours and opening times that cross midnight
During Ramadan, official and commercial hours change: authorities announce reduced working hours, and many shops and restaurants open after iftar until suhoor. This is where many apps break, because their schedule cannot understand that 9 pm to 3 am is a single period that starts on one day and ends on the next.
- Store each period as a start time and duration, or with a clear flag that it ends the next day.
- Allow several periods per day, such as one before iftar and one after taraweeh.
- Calculate Open now after midnight from the previous day's period.
- Show delivery and booking windows based on Ramadan hours, not regular hours.
- Respect different weekends: Friday–Saturday in Saudi Arabia, Saturday–Sunday in most of the UAE.
- Mind time zones: Saudi Arabia is UTC+3 and the UAE is UTC+4, and neither uses daylight saving time.
Prayer times in your app: when do you need them, and how?
Not every app needs prayer times, but they are useful in mosque, Quran memorization and travel apps, and in service apps that want to avoid scheduling appointments at prayer time, such as a technician visit or a salon booking. Times are calculated from the city's coordinates using an accepted method, and the method used in Saudi Arabia (Umm al-Qura) differs in some details from methods used elsewhere.
- Calculate times from the user's city or the branch location
- Use the accepted calculation method for each country
- Show them as a reference, with adjustable buffer minutes
- Leave a margin around prayer in appointment schedules if the business wants it
- Fixed times typed in by hand for the whole year
- One city for users spread across several cities
- Automatically blocking bookings at prayer time with no option for the business
- Claiming times are official when they do not come from the competent authority
Build it into your app with one prompt
If you build on Fanann, Hijri date support and right-to-left layouts are a core part of the Fanann Agent. Describe what you need as in the example below, then test the sensitive cases: the sighting night, after midnight in Ramadan, and a user in a different city. If your app is bilingual, read building a bilingual Arabic–English website that feels native in both.
Add full Hijri calendar and Ramadan support to my booking app. Store all times in UTC and display them in the branch's local time (Riyadh UTC+3, Dubai UTC+4). Add a user setting to show dates as Gregorian, Hijri (Umm al-Qura) or both, always with 0-9 digits. The date picker shows the Hijri date under the Gregorian one. Create a seasons table in the admin dashboard (Ramadan, Eid al-Fitr, Eid al-Adha, National Day, Founding Day), each with an expected date and a Confirm button for the admin. Give each branch regular hours and Ramadan hours that support multiple periods and periods ending after midnight, with a correct Open now status after 12 am. Add an option for the business to block appointments for 20 minutes at each prayer time based on the branch's city. Send no marketing notifications from 30 minutes before maghrib until one hour after it during Ramadan.
Try it in FanannKey takeaways
- Store in UTC and Gregorian; convert to Hijri only at display time.
- Use the Umm al-Qura calendar for Saudi Arabia, and note that the ar-SA locale may show Hijri by default.
- Ramadan and Eid start dates are announced by moon sighting, so make them admin settings.
- Ramadan hours often run past midnight, so design opening-hour tables to support it.
- Prayer times depend on city and calculation method; present them as a reference, not an official ruling.
Frequently asked questions
How do I add Hijri dates to my app?
Should I store Hijri dates in the database?
How does my app know when Ramadan starts?
Why does my site show Hijri dates when I did not ask for them?
How do I add prayer times to my app?
Ask your AI assistant about this
Copy this prompt into the AI assistant you use, then add the details of your own case.
I am reading this guide: “Hijri dates, prayer times and Ramadan hours in your app: a builder guide” https://fanann.com/en/blog/hijri-calendar-apps/ My question: how to add hijri date to app Use that page as a source and explain the answer step by step for my situation, tell me what to check before I start, and cite the page link.