Creating buttons dynamically from XML file text

I’ve created an XML calendar (with code from an example I found online) and now I want to add some additional functionality to it. Here’s what it currently looks like: http://www.evbc.org/frog/Main/evbccalendar.html

When the user clicks on a day with events, they are listed to the right of the calendar. I want the user to be able to click on an event in the list and have that load the details, including an image and colored category bar into the Details pane on the right. The reference to the image and category w/ corresponding color bar will be defined in the XML file along witht the details.

Here is the current code for displaying the events:

 
// show the event information when a date with events is clicked
calendar_ec.onDisplayEvent = function (eventsData, dateObj) {
var event_str = "<font color='#777574' size='+2'><b>" + dateObj.dateTimeFormat("dddd, d mmmm yyyy") + "</b></font><br><br>";
for (var i=0; i<eventsData.length; i++) { 
// create a pointer to the eventdata to save typing!
var d = eventsData*;
// output the title of the event
event_str += "<font color='#283569'><b>" + d.title + "</b></font><br>";
// if the start and end date are different dates display the range
if (d.startDate.getDate() <> d.endDate.getDate()) {
event_str += "<font color='#283569'>" + d.startDate.dateTimeFormat("d/m/yyyy") + " - " + d.endDate.dateTimeFormat("d/m/yyyy") + "</font><br>";
}
// output the start and end time of the events (contained within startDate and endDate)
if (!d.allDay) event_str += "<font color='#283569'>" + d.startDate.dateTimeFormat("h:nntt") + " - " + d.endDate.dateTimeFormat("h:nntt") + "</font><br>";
// for weekly events
if (d.eventType == "weekly") {
// the following outputs the pattern information for the recurring event
var output_str = "Every " + ((d.pattern.attributes.recur > 1) ? d.pattern.attributes.recur + " " : "") + "week" + ((d.pattern.attributes.recur > 1) ? "s" : "") + " on ";
var days_array = new Array();
for (var q=0; q<daysOfWeek_array.length; q++) {
if (d.pattern.attributes[daysOfWeek_array[q].substr(0,3)]) days_array.push(daysOfWeek_array[q]);
}
if (days_array.length == 7) {
output_str += "every day";
} else if (days_array[0] == "Monday" && days_array[1] == "Tuesday" && days_array[2] == "Wednesday" && days_array[3] == "Thursday" && days_array[4] == "Friday") {
output_str += "weekdays";
} else if (days_array[0] == "Sunday" && days_array[1] == "Saturday") {
output_str += "weekends";
} else {
for (var q=0; q<days_array.length; q++) {
if (days_array.length > 1 && q == days_array.length - 1) { 
output_str += " and ";
} else if (q > 0) {
output_str += ", ";
}
output_str += days_array[q];
}
}
event_str += "<font color='#283569'>" + output_str + "</font><br>";
// the event type is monthly
} else if (d.eventType == "monthly") {
// the following outputs the pattern information for the recurring event
var numString_array = ["First","Second","Third","Fourth","Last"];
if (d.pattern.attributes.date) {
output_str = "Day " + d.pattern.attributes.date + " of every " + ((d.pattern.attributes.recur > 1) ? d.pattern.attributes.recur + " " : "") + "month" + ((d.pattern.attributes.recur > 1) ? "s" : "");
} else {
if ("sun,mon,tue,wed,thu,fri,sat".indexOf(d.pattern.attributes.day) > 0) {
var days_obj = {sun:"Sunday",mon:"Monday",tue:"Tuesday",wed:"Wednesday",thu:"Thursday",fri:"Friday",sat:"Saturday"};
var patternDay = days_obj[d.pattern.attributes.day];
} else if (d.pattern.attributes.day == "day") {
var patternDay = "day";
} else if (d.pattern.attributes.day == "weekday") {
var patternDay = "weekday";
} else if (d.pattern.attributes.day == "weekendday") {
var patternDay = "weekend day";
}
output_str = numString_array[d.pattern.attributes.week - 1] + " " + patternDay + " " + ((d.pattern.attributes.recur > 1) ? "every " + d.pattern.attributes.recur + " " : "of every ") + "month" + ((d.pattern.attributes.recur > 1) ? "s" : "") 
}
event_str += "<font color='#777574'>" + output_str + "</font><br>"; //font was #283569
}
// output the description
if (d.description.length) event_str += d.description + "<br>";
// if there are more events output a line break
if (i < eventData_array.length - 1) event_str += "<br>";
}
// output the generated string to the text box
events_txt.htmlText = event_str;
}

Thanks for any help you can provide,

-fjhughes