My good pal Austin needed help turning his static calendar into one that could change the month, using AJAX. The calendar itself was written in PHP. Here is the quick and easy solution I came up with for him, using jQuery:
$(document).ready(function() { // Create Date Object var jsDateObject = new Date(); // Create Calendar Object ( Holds all your variables, etc ) var jsCalendar = {}; jsCalendar.currentMonth = jsDateObject.getMonth(); // Controls the NEXT button $("#jsCalendarNext").click(function() { // Update Active Month jsCalendar.currentMonth++; if(jsCalendar.currentMonth>12) { jsCalendar.currentMonth=1; } // Get New Calendar ajaxUpdateCalendar(); }); // Controls the PREV button $("#jsCalendarPrev").click(function() { // Update Active Month jsCalendar.currentMonth--; if(jsCalendar.currentMonth<1) { jsCalendar.currentMonth=12; } // Get New Calendar ajaxUpdateCalendar(); }); // Use AJAX to update the Calendar function ajaxUpdateCalendar() { $.post( "phpCalendarLoader.php", { calendarMonth: jsCalendar.currentMonth }, function(data) { $("#jsCalendarContainer").html(data); }, "html" ); } });
From here, all Austin had to do was set his $month variable to $_POST['calendarMonth'];.
This entry was posted on Wednesday, July 15th, 2009 at 1:04 pm and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
