I am using this js code to create a grid of calendars based on month and year and I want to have a button that will display those calendars.
EDITED
This is my code:
<input type="number" name="a" id="month" />
<input type="number" name="a" id="year" />
<button type="button" class="btn btn-secondary" id ="clickMe">Button</button>
The problem is that when I press the button nothing happens. How can I make the calendars be displayed only on button click?
Most of your methods are wrong especially those for Date. Please see an updated and working sample
(function myFunction() {
function calendar(month, year) {
var padding = "";
var totalfeb = "";
var i = 1;
var current = new Date();
var cmonth = current.getMonth();
var day = current.getDate();
var tempmonth = month + 1;
var prevmonth = month - 1;
if (month == 1) {
if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
totalfeb = 29;
} else {
totalfeb = 28;
}
}
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"];
var tempdate = new Date(tempmonth + ' 1 ,' + year);
var tempweekday = tempdate.getDay();
var tempweekday2 = tempweekday;
var dayamount = totaldays[month];
while (tempweekday > 0) {
padding += "<td class='premonth'></td>";
tempweekday--;
}
while (i <= dayamount) {
if (tempweekday2 > 6) {
tempweekday2 = 0;
padding += "</tr><tr>";
}
if (i == day && month == cmonth) {
padding += "<td class='currentday' onmouseover='this.style.background=\"#00ff00\"; this.style.color=\"#ffffff\"' onmouseout='this.style.background=\"#ffffff\"; this.style.color=\"#00ff00\"'>" + i + "</td>";
} else {
padding += "<td class='currentmonth' onmouseover='this.style.background=\"#00ff00\"' onmouseout='this.style.background=\"#ffffff\"'>" + i + "</td>";
}
tempweekday2++;
i++;
}
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 displayCalendar() {
for (i = 0; i < 12; i++) {
calendar(i, 2020);
}
}
var el = document.getElementById("clickMe");
if (el.addEventListener)
el.addEventListener("click", displayCalendar, false);
else if (el.attachEvent)
el.attachEvent('onclick', displayCalendar);
})();<button type="button" class="btn btn-secondary" id ="clickMe">Load Calendar</button>
<div id="calendar"/>
calendar(5, 2020) for june(month-1, arrays start at 0).