Master / Details Regions with yui Calendar

Question

I have a Calendar of Events that I need to display.  I have put a yui Calendar in my Master Region, and need it to control the Details Region.  I can get the Details Region to show a single event per day.
Is there a way to let the Details Region show multiple Events if they are scheduled on the same date?
I do not have access to an external web server to post my page to, but here is the code to the Master/Details Region on my site:
<div id="sidebar2">
    <div id="yuicalendar1"></div>
<script type="text/javascript">
// BeginWebWidget YUI_Calendar: yuicalendar1   (function() {
    var cn = document.body.className.toString();
    if (cn.indexOf('yui-skin-sam') == -1) {
      document.body.className += " yui-skin-sam";
  })();  var inityuicalendar1 = function() {
    var yuicalendar1 = new YAHOO.widget.Calendar("yuicalendar1");    // The following event subscribers demonstrate how to handle
    // YUI Calendar events, specifically when a date cell is
    // selected and when it is unselected.
    // See: http://developer.yahoo.com/yui/calendar/ for more
    // information on the YUI Calendar's configurations and
    // events.
    // The YUI Calendar API cheatsheet can be found at:
    // http://yuiblog.com/assets/pdf/cheatsheets/calendar.pdf
    //--- begin event subscribers ---//
    yuicalendar1.selectEvent.subscribe(selectHandler, yuicalendar1, true);
    yuicalendar1.deselectEvent.subscribe(deselectHandler, yuicalendar1, true);
    //--- end event subscribers ---//
yuicalendar1.cfg.setProperty("title", "Calendar of Events", false);    yuicalendar1.render();
  }  function selectHandler(event, data) {
  // The JavaScript function subscribed to yuicalendar1.  It is called when
  // a date cell is selected.
  // alert(event) will show an event type of "Select".
  // alert(data) will show the selected date as [year, month, date].
  var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];
  var r = dsCalendar.findRowsWithColumnValues({"Date": formattedDateString }, true);
  var region = Spry.Data.getRegion("classDetail");
  if(r){
   dsCalendar.setCurrentRow(r.ds_RowID);
   region.setState("showClass", true);
   } else {
    region.setState("ready", true);
  };  function deselectHandler(event, data) {
  // The JavaScript function subscribed to yuicalendar1.  It is called when
  // a selected date cell is unselected.
  };      // Create the YUI Calendar when the HTML document is usable.
  YAHOO.util.Event.onDOMReady(inityuicalendar1);
// EndWebWidget YUI_Calendar: yuicalendar1
</script>
<div spry:detailregion="dsCalendar" spry:setrow="dsCalendar" id="classDetail">
<div spry:state="showClass">
<table width="100%" border="0" cellpadding="1">
   <tr>
     <td colspan="2"><h4>{Class}</h4></td>
    </tr>
   <tr>
    <td colspan="2">{Description}</td>
    </tr>
   <tr>
     <td>{Location}</td>
     <td>{Date}</td>
   </tr>
</table>
    </div>
    <div spry:state="ready">
There are no classes on this date. Please select another date.
</div></div>
  <!-- end #sidebar2 --></div>
And, here is the code to my "schedule.htm" file:
Class
Logo
Description
Location
Date
Dreamweaver CS4 Intermediate
Take your skills to the next level with this training.
Austin, TX
12/15/2008
InDesign CS4 Advanced
This class is for experienced users that want to go beyond the basics.
Phoenix, AZ
12/18/2008
Flex CS4 Data Services
Learn about Live Cycle Data Services in this training.
Austin, TX
12/19/2008
Flash CS4 Rich Content Creation
From beginning to intermediate, learn how to animate with the latest tools.
Austin, TX
12/30/2008
Photoshop Advanced
Experienced Photoshop users will learn how to use advanced tools for image manipulation.
Phoenix, AZ
12/20/2008
Dreamweaver CS4 Intermediate
Take your skills to the next level with this training.
Austin, TX
12/01/2008
InDesign CS4 Advanced
This class is for experienced users that want to go beyond the basics.
Phoenix, AZ
12/08/2008
Flex CS4 Data Services
Learn about Live Cycle Data Services in this training.
Austin, TX
12/25/2008
Flash CS4 Rich Content Creation
From beginning to intermediate, learn how to animate with the latest tools.
Austin, TX
12/26/2008
Photoshop Advanced
Experienced Photoshop users will learn how to use advanced tools for image manipulation.
Phoenix, AZ
8/21/2009
Short Course
Seminar where the engineers come together to discuss TxDOT.
Austin, TX
8/26/2009
Long Course
Around the cementary, down to the high school, and back.
Wolfforth, TX
8/21/2009
No Class
No classes on this date.
n/a
Notice on the schedule.htm file, there are some classes that have the same date.  I would like the Details region to show multiple classes based on the date.  Is that even possible?
Thanks!

Answer 1

@strick,
Don't know if you got this sorted out already, but I'll add an answer since I looked here when trying to figure this out.
I had the same problem.
You can get this to do what you want in two steps:
1.)  Just below the line in your code that reads
var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];
add the following code:
function myFilterFunc(dataSet, row, rowNumber)
// Filter all rows with date = selected date
if (row['Date'] == formattedDateString){
return row;   }
else {
return null;}
// Filter the data.
dscalendar.filter(myFilterFunc);
2.) Just after the line in your code that reads
<table width="100%" border="0" cellpadding="1">
add the following code:
<tr spry:repeat="dscalendar">
Ok, one last step for the code that you've listed here.  You should be able to get rid of all the <tr> tags except for the outermost ones.  So, it could
look like this:
<table width="100%" border="0" cellpadding="1">
   <tr spry:repeat="dscalendar">
    <td colspan="2"><h4>{Class}</h4></td>
    <td colspan="2">{Description}</td>
    <td>{Location}</td>
    <td>{Date}</td>
   </tr>
</table>
You can see a working example of this at http://www.coloradogreenline.com/YUISpryCalendar/sprytest6.html.  October 13, 2009 has more than one event scheduled.  This one doesn't display the data in table format, but you can still it working.
Hope this helps.