Good morning!
I’m building a calendar using HTML and javascript (jQuery).
In short, I have a nav-like menu at the top with each month and the calendar is built below that.
Problem:
When the user clicks on a month to change the calendar, it’s as if jQuery remembers how many times the user has clicked previously and basically loops through the buildCalendar() function that many times. The first time they change it is ok but if the user clicks again the click event is fired twice. The third time a month is clicked, the click event is fired 4 times. Etc…
Here’s the code:
<div id="calendarLinkWrapper">
<div id="yearWrapper">
<div id="2010" class="yearDiv">2010</div>
<div id="2011" class="yearDiv">2011</div>
<div id="2012" class="yearDiv">2012</div>
<div id="2013" class="yearDiv">2013</div>
<div id="2014" class="yearDiv">2014</div>
<div id="2015" class="yearDiv">2015</div>
</div>
<div id="monthWrapper">
<div id="0" class="monthDiv">Jan</div>
<div id="1" class="monthDiv">Feb</div>
<div id="2" class="monthDiv">Mar</div>
<div id="3" class="monthDiv">Apr</div>
<div id="4" class="monthDiv">May</div>
<div id="5" class="monthDiv">Jun</div>
<div id="6" class="monthDiv">Jul</div>
<div id="7" class="monthDiv">Aug</div>
<div id="8" class="monthDiv">Sep</div>
<div id="9" class="monthDiv">Oct</div>
<div id="10" class="monthDiv">Nov</div>
<div id="11" class="monthDiv">Dec</div>
</div>
</div>
<div id="calendarDiv">
<table width="720" cellpadding="0" cellspacing="0" border="0" id="calendarTable">
<caption></caption>
<thead>
<tr>
<th scope="col">Sunday</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
// Global arrays:
var
weekdayArray = ['Sunday', 'Monday', 'etc...'],
monthNameArray = ['January', 'February', 'etc...'],
monthNumArray = [31, 28, 31, 30, 31, 'etc...'];
var main = {
init: function(){
main.defaultCalendar();
},
defaultCalendar: function(){
/* This function just gathers default date information for
today's date and passes month and year to the
buildCalendar function. */
main.buildCalendar(month, year);
},
changeDate: function(oldMonth, oldYear){
/* When a month is clicked it retrieves its id (which is a
month array number and passes in the old year value */
$('.monthDiv').click(function(){
main.buildCalendar(this.id, oldYear);
}
/*Same thing here for year except, obviously,
it would be main.buildCalendar(oldMonth, this.id); */
},
buildCalendar: function(month, year){
/*This has been shortened and simplified somewhat. I'll
give you the sequence of events: */
// create firstDayOfMonth and a dayCounter variable
// check for leap year
// Create table caption with month and year
// Build calendar between the 2 tbody tags using for loops
/* Call the changeDate function and wait for user to
click a month or year */
main.changeDate(month, year);
}
}
$(document).ready(main.init);