How to make Gregorian and Islamic calendar in one (javascript)

Question

I am trying to make calendar which contain both Gregorian and Islamic date in one,I just rough coded Gregorian calendar like bellow but i don't have idea that how to include Islamic date with this,could any one please give me idea that how to make this

I want to make calendar like this http://www.islamicfinder.org/Hcal/index.php

my code is :

function Calendar()
{
    var now=new Date();
    //---------------current date and time------------------
    var day=now.getDate();
    var month=now.getMonth()+1;
    var year=now.getFullYear();
    //-----------------------------------------------------

    var FirstDay=new Date(now.getFullYear(),now.getMonth(),1);
    var dayOne=FirstDay.getDay();
    var LastDay=new Date(now.getFullYear(),now.getMonth()+1,0);
    var dayLast=LastDay.getDay();
    var noDays=getMonthDays(year,month);

    var abs="<table><tr><td>sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Th</td><td>Fri</td><td>sat</td></tr><tr>";
    var iterator=0;;
    while(dayOne>0)
    {
        abs +="<td></td>"
        iterator++;
        dayOne--;
    }
    var i=1;
    alert(month);
    alert(year)
    while(i<=noDays)
    {
        if(iterator>6)
        {
            iterator=0;
            abs +="</tr><tr>"
        }
        abs +="<td>"+i+"</td>";
        iterator++
        i++;
    }
    var nameOfMonth=monthName(month);
    document.getElementById("head").innerHTML="<h1>"+nameOfMonth+"</h1>";
    document.getElementById("tble").innerHTML=abs;
}
function getMonthDays(iyear,imonth)
{
    if (((iyear % 4)==0) && ((iyear % 100)!=0) || ((iyear % 400)==0))
    {
        var days=new Array(0,31,29,31,30,31,30,31,31,30,31,30,31);
        return days[imonth];
    }
    else
    {
        var days=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
        return days[imonth];
    }

}
function monthName(m)
{
    var months=new Array("nill","January","February","March","April","May","June","July","August","September","October","November","December");
    //alert(months[m]);
    return months[m];
}

Santhoshkumar Sivaji · Answer 1 · 2013-10-24T10:22:54.257

I finally coded Calendar with the help of Gregorian to Islamic Date converter my final code is:

    function Calendar()
{

    var now=new Date();
    //---------------current date and time------------------
    var day=now.getDate();
    var month=now.getMonth()+1;
    var year=now.getFullYear();
    //-----------------------------------------------------

    var FirstDay=new Date(now.getFullYear(),now.getMonth()+1,now.getDate());
    var dayOne=FirstDay.getDay();
    var LastDay=new Date(now.getFullYear(),now.getMonth()+1,0);
    var dayLast=LastDay.getDay();
    var noDays=getMonthDays(year,month);

    var abs="<table class='cal' width='100%' cellspacing='0' cellpadding='3' border='0'><tr><td>sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Th</td><td>Fri</td><td>sat</td></tr><tr>";
    var iterator=0;;
    while(dayOne>0)
    {
        abs +="<td></td>"
        iterator++;
        dayOne--;
    }
    var i=1;

    while(i<=noDays)
    {
        if(iterator>6)
        {
            iterator=0;
            abs +="</tr><tr>"
        }
        abs +="<td>"+i+"<div class='test'> "+GregToIsl(month,i,year)+"</div>"+"</td>";
        iterator++
        i++;
    }
    var nameOfMonth=monthName(month);
    document.getElementById("head").innerHTML="<h1>"+nameOfMonth+"</h1>";
    document.getElementById("tble").innerHTML=abs;
}
function getMonthDays(iyear,imonth)
{
    if (((iyear % 4)==0) && ((iyear % 100)!=0) || ((iyear % 400)==0))
    {
        var days=new Array(0,31,29,31,30,31,30,31,31,30,31,30,31);
        return days[imonth];
    }
    else
    {
        var days=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
        return days[imonth];
    }

}
function monthName(m)
{
    var months=new Array("nill","January","February","March","April","May","June","July","August","September","October","November","December");
    //alert(months[m]);
    return months[m];
}




function test(val)
{
    return val+1;
}



function intPart(floatNum){
    if (floatNum< -0.0000001){
    return Math.ceil(floatNum-0.0000001)
    }
return Math.floor(floatNum+0.0000001)
}
function GregToIsl(mnth,day,year)
    {

d=parseInt(day)
m=parseInt(mnth)
y=parseInt(year)

delta=0
if ((y>1582)||((y==1582)&&(m>10))||((y==1582)&&(m==10)&&(d>14)))
      {
          //added +delta=1 on jd to comply isna rulling 2007
          jd=intPart((1461*(y+4800+intPart((m-14)/12)))/4)+intPart((367*(m-2-12*(intPart((m-14)/12))))/12)-
              intPart( (3* (intPart(  (y+4900+    intPart( (m-14)/12)     )/100)    )   ) /4)+d-32075+delta
          }
else
      {
          //added +1 on jd to comply isna rulling
          jd = 367*y-intPart((7*(y+5001+intPart((m-9)/7)))/4)+intPart((275*m)/9)+d+1729777+delta
          }
//arg.JD.value=jd
//added -1 on jd1 to comply isna rulling
jd1=jd-delta
//arg.wd.value=weekDay(jd1%7)
l=jd-1948440+10632
n=intPart((l-1)/10631)
l=l-10631*n+354
j=(intPart((10985-l)/5316))*(intPart((50*l)/17719))+(intPart(l/5670))*(intPart((43*l)/15238))
l=l-(intPart((30-j)/15))*(intPart((17719*j)/50))-(intPart(j/16))*(intPart((15238*j)/43))+29
m=intPart((24*l)/709)
d=l-intPart((709*m)/24)
y=30*n+j-30


return d+"-"+m;


}

this may be not optimized method but this is working

what if month is 28 days had as per local khaji, how to handle that — Yasar Arafath, Jan 03 '21 at 13:24
any idea for change total days in month? @santhoshkumar-sivaji — Yasar Arafath, Jan 10 '21 at 12:17
To convert Hijri date to any calendar date, see this method which does not use libraries and is always accurate: https://stackoverflow.com/questions/71222556/function-to-convert-any-of-5-islamic-hijri-calendars-dates-to-any-of-18-world — Mohsen Alyafei, Feb 23 '22 at 08:02

ronielhcuervo · Accepted Answer · 2014-06-17T21:54:35.550

The Islamic calendar (Hijri calendar) is a purely lunar calendar. It contains 12 months that are based on the motion of the moon, and because 12 synodic months is only 12 x 29.53=354.36 days, the Islamic calendar is consistently shorter than a tropical year, and therefore it shifts with respect to the Gregorian calendar. The calendar is based on the Qur’an (Sura IX, 36-37) and its proper observance is a sacred duty for Muslims.

See HERE, two functions to change date between (Islamic and Gregorian calendar).

fromGregorian:function(/*Date*/gregorianDate){
// summary:This function returns the equivalent Islamic Date value for the Gregorian Date.

......
}

toGregorian:function(){
// summary:This returns the equevalent Grogorian date value in Islamic Date object.

......
}

Look at HERE!, Examples of Calendars that can show both Gregorian and Hijri calendar at the same time.

How to make Gregorian and Islamic calendar in one (javascript)

2 Answers2