Skip navigation
barb2466
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">

<head>

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

</script>

<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" />

</head>

 

<body>

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

        if(r){

        dsCalendar.setCurrentRow(r.ds_RowID);

        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.

  YAHOO.util.Event.onDOMReady(inityuicalendar1);

 

 

// EndWebWidget YUI_Calendar: yuicalendar1

                </script>

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

            <div id="events">

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

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

                    <tr>

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

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

                    </tr>

                    <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>

                    </tr>

                  </table>

                </div>

                  <div>No events to display</div>

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

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

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

</body>

</html>

 

 

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.

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

    Have a look here http://www.dmxzone.com/go?19516

     

    Gramps

     
    |
    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.

     

    Gramps

     
    |
    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