Text Based Islamic Hijri Calendar - Alhabib Islamic Hijri Calendar Widget

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.

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:

There is a few parameters that can be set to change the output of the script. These parameters can be set via query strings with the usual format of: ?variable1=value1&variable2=value2&....

The first parameter is

caltype=kuwaiti || ummulqura

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.

Example
Kuwaiti: <script type="text/javascript" src="http://mitglied.lycos.de/alhabib/testphp/jsphp.php?caltype=kuwaiti"></script> outputs
Ummul Qura: <script type="text/javascript" src="http://mitglied.lycos.de/alhabib/testphp/jsphp.php?caltype=ummulqura"></script> outputs
The default caltype is ummulqura.

The second parameter is

iscombo=true || false

It tells the script whether or not to display the hijri date along side with the coresponding christian date. The default value is false.
<script type="text/javascript" src="http://mitglied.lycos.de/alhabib/testphp/jsphp.php?iscombo=true"></script> outputs

The third parameter is

monthdisplay=short || monthdisplay=long

The default value is long month name as seen in the above example. Setting the month name display to short via the following script
<script type="text/javascript" src="http://mitglied.lycos.de/alhabib/testphp/jsphp.php?monthdisplay=short"></script> will output

The last parameter is

dateadjust=[integer]

This options 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. So, this script
<script type="text/javascript" src="http://mitglied.lycos.de/alhabib/testphp/jsphp.php?dateadjust=-2&monthdisplay=short"></script> substract 2 days from the default date to give

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.