Skip navigation
Currently Being Moderated

Integrating Spry DataSet with YUI Calendar

Apr 1, 2012 8:00 PM

I am trying to integrate a Spry dataset with a YUI calendar. I want to do the following: (a) read dates from a simple HTML table (Spry datatset) and render the YUI calendar with those dates shaded, (b) information about an event on a particular day will be displayed when that date is clicked. Below is my complete code. I have trried as much as I can. Can anyone help me?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" xmlns:spry="">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="common/css/styles.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryData.js" type="text/javascript"></script>

<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>

<script src="../YUI/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>

<script src="../YUI/2.6.0/build/calendar/calendar-min.js" type="text/javascript"></script>

<script type="text/javascript">

var dsCalendar = new Spry.Data.HTMLDataSet("calendarList.html", "eventDetails", {firstRowAsHeaders: false, useColumnsAsRows: true, sortOnLoad: "column0", sortOrderOnLoad: "ascending"});

dsCalendar.setColumnType("column0", "date");


<link href="YUI/2.6.0/build/fonts/fonts-min.css" rel="stylesheet" type="text/css" />

<link href="../YUI/2.6.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" />




        <div id="CalendarView">

        <div id="CalendarViewInfo">

            <h2>Events Calendar View Control:</h2>

            <p>Click any date on the calendar below to see current and upcoming events.</p>

        </div><!-- end #CalendarViewInfo -->

        <div id="calendarDetails">

            <div id="calendar">

                <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: for more

    // information on the YUI Calendar's configurations and

    // events.


    // The YUI Calendar API cheatsheet can be found at:



    //--- begin event subscribers ---//

    yuicalendar1.selectEvent.subscribe(selectHandler, yuicalendar1, true);

    yuicalendar1.deselectEvent.subscribe(deselectHandler, yuicalendar1, true);

    //--- end event subscribers ---//





  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("eventDetail");



        region.setState("showEvent", 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.




// EndWebWidget YUI_Calendar: yuicalendar1


           </div><!-- end #calendar -->

            <div id="events">

                <div spry:region="dsCalendar" id="eventDetail">

                  <table cellpadding="5" cellspacing="5">


                      <th spry:sort="column0">Column0</th>

                      <th spry:sort="column1">Column1</th>


                    <tr spry:repeat="dsCalendar">

                      <td width="120px" align="right" valign="top"><strong>{column0}</strong></td>

                      <td align="left" valign="top"><div align="justify">{column1}</div></td>




                  <div>No events to display</div>

            </div><!-- end #events -->

        </div><!-- end #calendarDetails -->

    </div><!-- end #CalendarView -->





My calendarList.html file contains one HTML table with the id="eventDetails" and contains 4 columns, 'Event Name', 'Event Date', 'Event Location' and 'Event Details'. Currently I have two events on two different dates. One event date shows on loading the page. Events details do not show when a date is clicked. Does not matter which date is clicked, the event that showed when the page loaded does not change. If there is more than one event on a particular date, that event that showed when the page loaded still does not change. Can anyone help me. Thanks in advance.

  • Currently Being Moderated
    Apr 2, 2012 6:57 AM   in reply to barb2466

    Have a look here



    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 4:10 PM   in reply to barb2466

    barb2466 wrote:


    Thanks. Helps but does not answer the spry problem.

    I fail to see why it does not help you with your Spry problem. I am in the process of finishing off a website right now where I have employed said widget. OK I did use values from a database, but these values could just as easily have been obtained from a Spry dataset.



    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points