Useful Web Widgets - The Interface Code
(Page 5 of 5 )
As I mentioned before the calendar object can be used in a lot of environments. The following function is browser DOM specific and shown here as just an example of how to use the data generated. It's been tested in Firefox and Safari, but may work fine in most if not all browsers. This script does not provide a table above for display of the name of the days or a display of the month. All that is up to you. I have the calendar engine code in a separate document and embed it using a "<script>" tag. If you are trying to put together a complete solution you may want to put all the code in a separate document.
We first get a reference to the table which will house the calendar, and then get a calendar object. We also need to get together a few DOM objects to clone while constructing the rows of days. Make sure to set class, align and other attributes you may need to massage the appearance of the table at this point.
function getCalendarMonth(data,selectedYear,selectedMonth)
{
var table = document.getElementById("calendarTable");
var cal = new calendar(selectedYear,selectedYear);
var month = cal.years[selectedYear].monthObjects
[selectedMonth];
var len = month.dayObjects.length;
var trow = document.createElement("tr");
trow.setAttribute("class","calRow");
var tcell = document.createElement("td");
tcell.setAttribute("valign","top");
var temprow = trow.cloneNode(true);
var eventContainer = document.createElement("div");
Now it's time to loop through the days of the month, adding the event information and constructing the table markup. Depending on how big you want to make the calendar you may want to simply put links in each day pane that produce a popup containing the day's events.
var tempCell = null;
var counter = 0;
var dnum;
for(var c = 0;c < len;c++)
{
if(counter == 7)
{
//we've put seven cells in the current row lets start again.
counter = 0;
}
if(counter == 0)
{
//new row
temprow = trow.cloneNode(true);
}
//new cell
tempCell = tcell.cloneNode(true);
dobj = month.dayObjects[c];
//event information
if(typeof data[dobj.displayNumber] != "undefined")
{
var devent = data[dobj.displayNumber];
}
else
{
var devent = "";
}
temptxt = document.createTextNode(dobj.displayNumber);
eventText = document.createTextNode(devent);
container = eventContainer.cloneNode(false);
container.appendChild(eventText);
tempCell.appendChild(temptxt);
tempCell.appendChild(container);
if(dobj.displayNumber == "")
{
//make a blank cell and set a CSS selector
tempCell.setAttribute("class","blankcell");
}
else
{
//put the day number in and set a CSS selector
tempCell.setAttribute("class","daycell");
}
//add the new cell to the current row
temprow.appendChild(tempCell);
// if we're done inserting all the cells in the row, add it to the table.
if(counter == 6)
{
table.appendChild(temprow);
}
counter++;
}
}
Your Time is up
These three scripts should give you a good start or be a useful addition to an already established library of JavaScript functions. Each can be modified and expanded to fit more situations. If you have any ideas on mods please share them.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 6 
