Show Hijri date on hover of Gregorian date

[mr-islam]

A progressive enhancement to encourage the Hijri calendar. Can't make it the default since people could be confused and might not be able to check properly

Need to figure out how to show this is a feature (possibly a a grey, dotted underline), and to make it work on mobile (on tap)

Similar to #40

Can use this browser native code:

new Intl.DateTimeFormat('ar-TN-u-ca-islamic', {day: 'numeric', month: 'long',weekday: 'long',year : 'numeric'}).format(Date.now());

This uses the Umm al-Qura system (I think—we need to confirm), which of course not everybody follows, nor is it applicable to all locations. But it's a good approximation in general, and so this Hijri date should be shown an indication this is an approximate date.

[mr-islam]

Another option: https://www.npmjs.com/package/hijri-date

Though I don't think it brings any special value over the native date handling + day.js

[Akram9]

Assalamualaikum. If you would take my suggestion, display only the Hijri date. Everyone has the Gregorian date on their devices. It makes more sense when we visit an Islamic website to see the Hijri date.

As for the Hijri corrections with respect to location, I have had the same problem. The way I have thought to solve this is to follow the Makkah calendar, and have a list of corrections corresponding to coordinate ranges and apply the appropriate correction. What do you think about this?

[mr-islam]

Wa alaykum as salam wa rahmatullah @Akram9 😊🌷

Thank you so much for your good suggestions

How lovely it would be to make Hijri dates the default! For sure, people can get Gregorian dates everywhere else, and Muslims should love to use the Hijri calendar.

But the reason why I think the Georgian date should be default on Layl:

Because it's essential for the user to double check the date Layl is using for calculations. In some rare cases, their device can report the wrong date, which is what Layl detects, so if Layl displays the Hijri date by default they might miss the error.

But if Layl shows the wrong Gregorian date, people can quickly realize the mistake and correct it.

So for accuracy and to allow double checking easily, the Georgian date is a sad necessity I think.

---

But we can do something to make the Hijri date more prominent. Maybe some kind of fade in, where after maybe 10 seconds, the Hijri date appears and Gregorian is switched to the tool tip.

Let me know your thoughts! And right now I'm focused on finishing support for translations in Layl, so we have time to make the best plan inshaAllah 👌🏽.

You can also kindly help test the latest version of Layl here! https://deploy-preview-41--layl-beta.netlify.app/

[Akram9]

Okay, now I understand why you need to display the Gregorian dates. In that case, what about putting both the dates side by side. Maybe like - 23 Sha'ban (5 Apr - 6Apr) or the Hijri date on top of the Gregorian one like 23 Sha'ban 5 Apr - 6 Apr

The reason I would suggest to keep the Hijri date clearly visible rather than hidden is because many people may not know that thay can access Hijri under the Gregorian date.

What do you think?

[Akram9]

The latest version works good. But it appears dark on SalamWeb, Vivaldi and Firefox, while it is white in Chrome. I hope I am doing something wrong. Tested only on Android. Late night here, so I will test this on computer tomorrow in sha Allah.

Also, in the last paragraph in the Sufone website there is a grammatical error.

[mr-islam]

Jazakumullahu khayran! 🌻

1. Yes for sure that's a great idea, showing both dates side-by-side is the best of both. The only thing I'm worried about is if that might put too much information on the screen at once. Maybe it could be distracting / busy looking… But we'll try it and see how it looks inshaAllah 👍.
2. Layl follows the browser preference for dark or light theme, and most browsers follow the system preference for dark or light theme. I'm not sure why for Chrome it is appearing white, but I don't think it's a problem with Layl…
3. Thank you! I just fixed the typo on https://suf.one

Jazakumullahu khayran and I hope you have a good rest :)

[Akram9]

Wa iyyaka!

1.In sha Allah.

2.Yes, indeed it is following the theme of the browser. My Chrome theme was light, so Layl was light last night. Setting dark theme makes Layl dark too. So it is working perfectly fine.

3.No problem.