JavaScript-Calender date cant displayed in Mozilla FireFox

xtremebass

Hello Bytes,

i have a calender program which is created by using Javascript. when i execute that program using Internet Explorer,it works properly but when i tried in Mozilla firefox it didnt worked.
Dates of particular year,month not displayed in that calender grids. i have collected that coding from online free resources.
Here i have attached code for your reference. please do suggest me how do i display the calender date in grids in Mozilla Firefox.

file Name:calender.html

Expand|Select|Wrap|Line Numbers

  
<html>

<head>

<script language="JavaScript">

<!--

var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var days = new Array("S", "M", "T", "W", "T", "F", "S");
 
today = new getToday();    

var element_id;
 
function getDays(month, year) 

{

    // Test for leap year when February is selected.

    if (1 == month)

        return ((0 == year % 4) && (0 != (year % 100))) ||

            (0 == year % 400) ? 29 : 28;

    else

        return daysInMonth[month];

}
 
function getToday()

{

    // Generate today's date.

    this.now = new Date();

    this.year = this.now.getFullYear() ; // Returned year XXXX

    this.month = this.now.getMonth();

    this.day = this.now.getDate();

}
 
function newCalendar() 

{

    var parseYear = parseInt(document.all.year  [document.all.year.selectedIndex].text);
 
    var newCal = new Date(parseYear , document.all.month.selectedIndex, 1);

    var day = -1;

    var startDay = newCal.getDay();

    var daily = 0; 
 
    today = new getToday(); // 1st call

    if ((today.year == newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))

       day = today.day;

    // Cache the calendar table's tBody section, dayList.

    var tableCal = document.all.calendar.tBodies.dayList;
 
    var intDaysInMonth =

       getDays(newCal.getMonth(), newCal.getFullYear() );
 
    for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)

           for (var intDay = 0;

             intDay < tableCal.rows[intWeek].cells.length;

             intDay++)

     {

          var cell = tableCal.rows[intWeek].cells[intDay];
 
          // Start counting days.

          if ((intDay == startDay) && (0 == daily))

             daily = 1;
 
          // Highlight the current day.

          cell.style.color = (day == daily) ? "red" : "";

          if(day == daily)

          {

                document.all.todayday.innerText= "Today: " +  newCal.getFullYear()+ "-" + 

                    (newCal.getMonth()+1) + "-" + day ;

          }

          // Output the day number into the cell.

          if ((daily > 0) && (daily <= intDaysInMonth))

             cell.innerText = daily++;

          else

             cell.innerText = "";

       }
 
}
 
     function getTodayDay()

     {

                document.all[element_id].value = today.year + "-" + (today.month+1) + 

                    "-" + today.day ; 

                //document.all.calendar.style.visibility="hidden";

                document.all.calendar.style.display="none";

                document.all.year.selectedIndex =100;   

                document.all.month.selectedIndex = today.month; 

     }
 
        function getDate() 

         {

            // This code executes when the user clicks on a day

            // in the calendar.

            if ("TD" == event.srcElement.tagName)

               // Test whether day is valid.

               if ("" != event.srcElement.innerText)

               { 

                 var mn = document.all.month.selectedIndex+1;

                 var Year = document.all.year [document.all.year.selectedIndex].text;

                 document.all[element_id].value=Year+"-"+mn +"-"  +event.srcElement.innerText;

                 //document.all.calendar.style.visibility="hidden";

                 document.all.calendar.style.display="none";

             }

         }
 
function GetBodyOffsetX(el_name, shift)

{

    var x;

    var y;

    x = 0;

    y = 0;
 
    var elem = document.all[el_name];

    do 

    {

        x += elem.offsetLeft;

        y += elem.offsetTop;

        if (elem.tagName == "BODY")

            break;

        elem = elem.offsetParent; 

    } while  (1 > 0);
 
    shift[0] = x;

    shift[1] = y;

    return  x;

}    
 
function SetCalendarOnElement(el_name)

{

    if (el_name=="") 

    el_name = element_id;

    var shift = new Array(2);

    GetBodyOffsetX(el_name, shift);

    document.all.calendar.style.pixelLeft  = shift[0]; //  - document.all.calendar.offsetLeft;

    document.all.calendar.style.pixelTop = shift[1] + 25 ;

}
 
function ShowCalendar(elem_name)

{

        if (elem_name=="")

        elem_name = element_id;
 
        element_id    = elem_name; // element_id is global variable

        newCalendar();

        SetCalendarOnElement(element_id);

        //document.all.calendar.style.visibility = "visible";

        document.all.calendar.style.display="inline";

}
 
function HideCalendar()

{

    //document.all.calendar.style.visibility="hidden";

    document.all.calendar.style.display="none";

}
 
function toggleCalendar(elem_name)

{

    //if (document.all.calendar.style.visibility == "hidden")

    if(document.all.calendar.style.display=="none")

        ShowCalendar(elem_name);

    else 

        HideCalendar();

}

-->

</script>
 
<style>

.today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold}

.days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center}

.dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}

</style>
 
</head>

<body>

<FORM name=myForm>

<INPUT id=MyDate name=MyDate size=15> 

<a href="javascript:;" onClick="toggleCalendar('MyDate')">Calendar</a>

</form>
 
<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4">

  <TBODY>

  <TR>

    <TD colSpan=7 vAlign=center>

    <!-- Month combo box -->

    <SELECT id=month onchange=newCalendar()> 

        <SCRIPT language=JavaScript>

        // Output months into the document.

        // Select current month.

        for (var intLoop = 0; intLoop < months.length; intLoop++)

            document.write("<OPTION " +    (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);

        </SCRIPT>

    </SELECT> 

    <!-- Year combo box -->

    <SELECT id=year onchange=newCalendar()> 

        <SCRIPT language=JavaScript>

        // Output years into the document.

        // Select current year.

        for (var intLoop = 1900; intLoop < 2028; intLoop++)

            document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);

        </SCRIPT>

    </SELECT> 
 
    </TD>

  </TR>
 
  <TR class=days>

    <!-- Generate column for each day. -->

    <SCRIPT language=JavaScript>

    // Output days.

    for (var intLoop = 0; intLoop < days.length; intLoop++)

        document.write("<TD>" + days[intLoop] + "</TD>");

    </SCRIPT>

  </TR>
 
  <TBODY class=dates id=dayList onclick="getDate('')" vAlign=center>

  <!-- Generate grid for individual days. -->

  <SCRIPT language=JavaScript>

    for (var intWeeks = 0; intWeeks < 6; intWeeks++)

    {

        document.write("<TR>");

        for (var intDays = 0; intDays < days.length; intDays++)

            document.write("<TD></TD>");

        document.write("</TR>");

    }

  </SCRIPT>
 
  <!-- Generate today day. --></TBODY>

  <TBODY>

  <TR>

    <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>

    <TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>

  </TR>

  </TBODY>
 
</TABLE>
 
</body>

</html>

acoder

The code is very IE-specific. Just by a cursory glance, I noticed:
1. document.all
2. innerText
3. global window.event
4. srcElement

All non-standard and will not work in most browsers. Since you've got this for free online, scrap this code - it's not worth the effort changing it - and get a decent cross-browser calendar. I suggest you try Dynarch.

JavaScript-Calender date cant displayed in Mozilla FireFox

re: JavaScript-Calender date cant displayed in Mozilla FireFox

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about