Difference between revisions of "JavaScript Calendar Library"

From CSE330 Wiki
Jump to: navigation, search
(Creating from content formerly in Module 6)
 
m
 
Line 8: Line 8:
 
<source lang="javascript">
 
<source lang="javascript">
 
// For our purposes, we can keep the current month in a variable in the global scope
 
// For our purposes, we can keep the current month in a variable in the global scope
var currentMonth = new Month(2012, 9); // October 2012
+
var currentMonth = new Month(2017, 9); // October 2017
  
 
// Change the month when the "next" button is pressed
 
// Change the month when the "next" button is pressed

Latest revision as of 16:45, 11 October 2017

Creating a calendar API from scratch is ambitious. To help you get started, we have written some JavaScript helper functions that take care of the "calendar math" for you. The code is available at:

For example, this is how you would make a button to load the next month and show alerts containing all the days in the weeks contained by that month.

// For our purposes, we can keep the current month in a variable in the global scope
var currentMonth = new Month(2017, 9); // October 2017

// Change the month when the "next" button is pressed
document.getElementById("next_month_btn").addEventListener("click", function(event){
	currentMonth = currentMonth.nextMonth(); // Previous month would be currentMonth.prevMonth()
	updateCalendar(); // Whenever the month is updated, we'll need to re-render the calendar in HTML
	alert("The new month is "+currentMonth.month+" "+currentMonth.year);
}, false);


// This updateCalendar() function only alerts the dates in the currently specified month.  You need to write
// it to modify the DOM (optionally using jQuery) to display the days and weeks in the current month.
function updateCalendar(){
	var weeks = currentMonth.getWeeks();
	
	for(var w in weeks){
		var days = weeks[w].getDates();
		// days contains normal JavaScript Date objects.
		
		alert("Week starting on "+days[0]);
		
		for(var d in days){
			// You can see console.log() output in your JavaScript debugging tool, like Firebug,
			// WebWit Inspector, or Dragonfly.
			console.log(days[d].toISOString());
		}
	}
}

Important: JavaScript starts the months of a year, and the days of a week, at index 0. This means that in JavaScript, January is month 0, and December is month 11. Our calendar helper functions maintain this JavaScript convention.