Lunar Hijri Calendar

A well designed Hijri calendar that updates at sunset, prioritizes moon sightings over predictions, and helps people reconnect with spiritual practice and traditional methods of tracking time

Comment

Inspiration

I was inspired to create this after spending an entire day trying to understand the lunar calendar and figure out what day I needed to fast. Every year, there seems to be confusion and debate around Hijri dates, especially when it comes to Ramadan, moon sightings, and Eid. I wanted to build something more accessible. I also saw many people complaining on reddit and in my circle about the lack of us having a calendar and how the Muslim community has to adjust to the west, so this is to keep a bit of tradition. Since the new year just started (for hijri) I thought this would be a great time to make a nice calendar. I also hope it helps those who don’t practice Islam to learn more and understand the calendar and culture better.

What it does

This calendar visually displays all 12 months of the Hijri calendar in a modern, interactive format. Each day is mapped to its corresponding Gregorian date, including sunset-to-sunset timing to reflect how lunar days are traditionally measured. It highlights the current Hijri month in real time, and hovering over any date shows its Gregorian equivalent. The goal is to help users understand, plan, and engage with the Islamic calendar more easily, whether they’re fasting, preparing for holidays, or simply learning.

How we built it

I built the calendar using HTML, CSS, and JavaScript. The Hijri dates are powered by the Aladhan Islamic Calendar API, which provides real-time data for each lunar day, and then they are proof checked and adjusted based on moon sightings and the time of maghrib (sunset) in my location. I used JavaScript to dynamically highlight the current Hijri month and map each day to its corresponding Gregorian date, including sunset transitions. CSS was used to create an grid layout and subtle hover effects for interactivity.

Challenges we ran into

One major challenge was accurately converting and displaying Hijri dates alongside Gregorian ones, especially since Islamic days start at sunset not midnight. This required careful time handling and understanding of how lunar dates shift across different time zones. It was also confusing since there is no recent API or many good resources, so I had to do a lot of research. There is also a lot of misinformation on the internet in regards to the months, so research was required.

Accomplishments that we're proud of

I'm proud of building a functional and beautifully designed Hijri calendar that updates in real time and makes an often confusing system easier to understand. I made something that’s culturally meaningful and accessible to a wide audience. It feels good to know this tool can support learning

What we learned

I learned html and CSS since it was my first time using it. I also learned a lot about Hijri months since I practically knew nothing before.

What's next for Lunar Hijri Calendar

Launch into a proper website Live viewing of the current moon Hijri age calculator Animation that highlights the current day on the calendar Timer that shows how much time is left in a moon phase Informative sections (since certain months are locked until the moon sighting, instead of clicking at it leading to nothing, it will click and lead to an information page on traditions, knowledge about moons, history etc. This feature will allow the website to be an educational source for children as well as a functional calendar!)

Built With

Share this project:

Updates