Content is Loading
| Translate | Share & More

Script's Users
240

Javascript Text Based Islamic Hijri Calendar

If you do not need fancy looking hijri calendar widget, or you want to style the calendar text by yourself, or you are a webmaster or a web developer that want to build your own hijri calendar web applications, then the following code may be of use.

General Usage

This is a javascript code that can be used to display current hijri date of islamic calendar on a web page.

The above code will output something like this:

Setting the Display

With the form below you can further configure the javascript output.

    Calendar Display
  •   [?]
    It is used to tell the script which algorithm to use to calculate the current hijri date. Kuwaiti algorithm is purely mathematical and based on statistical calculation. It does not consider the sighting possibility or the position of the moon at a particular location. It is said to be used as a basis for the hijri calendar in Microsoft Windows operating system. Ummul Qura algorithm is based on the current position of the moon as seen from Makkah. It is constructed by Ummul Qura calendar committee in Saudi Arabia.
  •   [?]
    This setting will determine the hijri calendar month format displayed, whether as full names or shorter names.
  •   [?]
    This option substract or add the default date with the given integer value. It is used to adjust the hijri date so that it matches with the hijri date currently in effect in a particular country or region. This option is there because until now there has been no unified global islamic hijri calendar system.
  •  
  •  
    • Your Place
  • [?]
    If you provide both latitude and longitude of your place, the script will calculate the sunset time and adjust the hijri date change according to this time (maghrib time at your place). Otherwise the hijri date change will happen at midnight.
    You can use the Qibla Pointer to find out the coordinate of your place.
  •   [?]
    Enter your local latitude coordinate in decimal.
  •   [?]
    Enter your local longitude coordinate in decimal.
  •   [?]
    This option adjust the displayed date to your timezone relative to UTC or Greenwich.

  • The islamic calendar output of the script will appear here.

SCRIPT:

You can then, copy the SCRIPT above and insert it at appropriate position on your webpage's HTML source code.

Styling the Hijri Date

Well, because the javascript code returns a text, you can apply any formating to the output as you can with ordinary html text. You can change the color, size, and the font face of the displayed hijri date. And with CSS styling you can do more.

<p style="text-align:center;width:250px;color:#550000;padding:3px;font-size:1.5em;border:1px dotted red;background:#ffcccc;"><script type="text/javascript" src="http://www.al-habib.info/dynjs/jsphp.js"></script></p>

<p style="text-align:center;width:250px;color:#005500;padding:3px;font-size:1.5em;border:1px dotted green;background:#ccffcc;"><script type="text/javascript" src="http://www.al-habib.info/dynjs/jsphp.js?lang=ar&iscombo=true"></script></p>

Updates

This javascript is under regular development based on your feedbacks and other idea. While I would strive to not changing the script in the future, I will not guarantee such condition. Therefore, please subscribe to Alhabib's RSS or follow me using Twitter to stay updated about this script and its new features as well as its availability.

Comments or Tell Us if You Use the Script