Recently, I encountered a challenge with my code in Chrome and realized that it also needs to work in Internet Explorer. Can someone assist me in making it fully functional in IE?
I suspect that there might be specific code adjustments needed for IE as the table formatting seems off and rows are not aligning properly every 7 items.
<div id="calendar"></div>
<script>
function calendar(month) {
//Variables to be used later. Place holders right now.
var padding = "";
var totalFeb = "";
var i = 1;
var testing = "";
var current = new Date();
var cmonth = current.getMonth(); // current (today) month
var day = current.getDate();
var year = current.getFullYear();
var tempMonth = month + 1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month - 1;
//Determing if Feb has 28 or 29 days in it.
if (month == 1) {
if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
totalFeb = 29;
} else {
totalFeb = 28;
}
}
// Setting up arrays for the name of the months, days, and the number of days in the month.
var monthNames = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
var totalDays = ["31", "" + totalFeb + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
// Temp values to get the number of days in current month, previous month. Also getting the day of the week.
var tempDate = new Date(tempMonth + ' 1 ,' + year);
var tempweekday = tempDate.getDay();
var tempweekday2 = tempweekday;
var dayAmount = totalDays[month];
// Padding the other days for the first week with the previous months days based on the first day of the current month.
while (tempweekday > 0) {
padding += "<td class='premonth'></td>";
tempweekday--;
}
// Filling in the calendar with the current month days in the correct locations.
while (i <= dayAmount) {
if (tempweekday2 > 6) {
tempweekday2 = 0;
padding += "</tr><tr>";
}
if (i == day && month == cmonth) {
padding += "<td class='currentday("+ i + ")' onMouseOver='this.style.background=\"#00AA00\"; this.style.color=\"#FFFFFF\"' onMouseOut='this.style.background=\"aqua\"; this.style.color=\"black\"'>" + i + "</td>";
} else {
padding += "<td id='currentmonth("+ i +")' class='currentmonth' onclick='DaySelection(" + i + ");' onMouseOver='this.style.background=\"#00FF00\"' onMouseOut='this.style.background=\"#FFFFFF\"'>" + i + "</td>";
}
tempweekday2++;
i++;
}
// Outputting the calendar onto the site along with the month name and days of the week.
var calendarTable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>" + monthNames[month] + " " + year + "</th></tr>";
calendarTable += "<tr class='weekdays'> <td>Sun</td> <td>Mon</td> <td>Tues</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarTable += "<tr>";
calendarTable += padding;
calendarTable += "</tr></table>";
document.getElementById("calendar").innerHTML += calendarTable;
}
function go12() {
var my_date = new Date();
alert(my_date.getMonth());
var MonthOFYear = my_date.getMonth();
calendar(MonthOFYear);
}
if (window.addEventListener) {
window.addEventListener('load', go12, false);
} else if (window.attachEvent) {
window.attachEvent('onload', go12);
}
function DaySelection(a) {
var selection = document.getElementById('currentmonth(' + a + ')').textContent;
alert(selection);
}
</script>