Useful Web Widgets

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.