38
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>
