Useful Web Widgets - A Calendar Engine
(Page 4 of 5 )
The third and final script is an object engine that can be used to produce a calendar. It's just the internal engine that produces the data for a calendar over a range of years so that once the object is created, you can loop through it to produce a calendar in any user interface you wish. This, as I mentioned before, enables it to be used in any ECMA script based language that supports the code it uses. You could just as easily use this object in a Flash movie as you could in an HTML page.
//*******************Calender Object**************************
function calender(yearLow,yearHigh)
{
this.yearLow = yearLow;
this.yearHigh = yearHigh;
this.years = new Array();
this.compile = compile;
this.compile();
}
function compile()
{
if(this.yearHigh != this.yearLow)
{
var range = this.yearHigh - this.yearLow;
}
else
{
var range = 1;
this.yearHigh++;
}
for(var i = this.yearLow;i < this.yearHigh;i++)
{
this.years[i] = new year(i);
}
}
//**********************End Calender Object*************************
The main object is the calendar object. A range of years can be given or the "yearHigh" and "yearLow" could be the same. Each year will be represented by a year object which is put into the "years" array.
//**********************Year Object***************************
function year(num)
{
this.number = num;
this.monthArray = new Array("January","Febuary","March","April","May","June","July",
"August","September","October","November","December")
this.monthObjects = new Array();
this.addMonths = addMonths;
this.addMonths();
}
function addMonths()
{
for(var i = 0;i < 12;i++)
{
this.monthObjects[i] = new month
(i,this.number,this.monthArray[i]);
}
}
//*************************End Year Object***********************
The year object creates month objects for each month. Each month is sent the number of the month, the year and the text label of the month.
//******************Month Object************************
function month(num,year,name)
{
this.number = num;
this.textName = name;
this.year = year;
this.days = 0;
this.start = 0;
this.end = 0;
this.panes = 36;
this.dayObjects = new Array();
this.setDays = setDays;
this.setStart = setStart;
this.setEnd = setEnd;
this.addDays = addDays;
this.setDays();
this.setStart();
this.setEnd()
this.addDays();
}
function setDays()
{
this.days = 32 - new Date(this.year, this.number,
32).getDate();
}
function setStart()
{
this.start = new Date(this.year,this.number,1).getDay
();
if((this.start == 5 && this.days == 31) ||
(this.start > 5 && this.days > 28))
{
this.panes = 43;
}
}
function setEnd()
{
if(this.start > 0)
{
this.end = (this.start) + this.days;
}
else
{
this.end = this.days;
}
}
function addDays()
{
var count = 1;
var count2 = 1;
for(var i = 0;i < this.panes;i++)
{
if(i >= this.start && i < this.end)
{
this.dayObjects[i] = new day
(count)
count++;
}
else
{
this.dayObjects[i] = new day
("");
count2++;
}
}
}
//**********************End Month Object*******************
Each month object determines the number of days it needs and creates a day object for each. Determining the number of days in the month relies on the fact that if you feed a day number to the date object that is out of range (32), it will give you a date in the next month. Subtracting the result from 32 will give you the number of days in the month.
It also creates days for the "blank" days in the calendar. In other words, if the first day of the month starts on Tuesday, a "blank" day object will be created for each day of the week before that. The same goes for "blank" day panes at the end of the calendar. The calendar will expand from 35 panes to 42 when needed depending on the number of days in the month and the day of the first of the month.
The final object is the day object. It simply contains the number of the day and has no methods of its own. You could store event information for each day in this object if you wished.
function day(num)
{
this.displayNumber = num;
}
//**************End Day Object*************************
It's easy to loop through this tree of objects to create a calendar. The input to this function could come from drop down menus for the month and year. An array of events could be written into the page using a server side language or retrieved via AJAX and fed to the function for placing event text or links for events in specific day panes.
First we'll start with some html to put the calendar into as well as some controls to determine what year and month we need.
<form>
<label>Select a Year
<select id="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</label>
<label>Select a Year
<select id="year">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</select>
</label>
<input type="button" value="View the Calendar"
onClick="calendarDisplay()">
</form>
<br /><br />
<table id="calendarTable">
</table>
The button in this example calls a function called "calendarDisplay" which starts the ball rolling. The first thing that we need to do is make sure the table element for the calendar is clear to make way for a new calendar. I use the "innerHTML" property which is a Microsoft invention. There are ways to clear the contents of an element using the DOM which you can certainly use if you wish. You may need to do some method or object sniffing however, since creating a range in IE is not done the same way it is in other browsers.
We then retrieve values from our month and year dropdowns, and call the "getCalendarMonth" function. For example purposes there is an array called "cdata" that we will use to insert events into our calendar. That array, along with the selected year and the selected month, is passed to "getCalendarMonth".
var cdata = new Array("","","","Doctor visit","","Get Car Fixed","","","","vacation","vacation","vacation","vacation",
"vacation","vacation","vacation","vacation","vacation",
"vacation","vacation","","","Bob's birthday");
function calendarDisplay()
{
var table = document.getElementById("calendarTable");
table.innerHTML = "";
var mobj = document.getElementById("month");
var yobj = document.getElementById("year");
var month = mobj.options[mobj.selectedIndex].value;
var year = yobj.options[yobj.selectedIndex].value;
getCalendarMonth(cdata,year,month);
}
Next: The Interface Code >>
More JavaScript Articles
More By Chris Root
/ 6 
