5 Replies Latest reply: Apr 5, 2012 11:22 AM by barb2466 RSS

    Integrating Spry DataSet with YUI Calendar

    barb2466 Community Member

      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.

        • 1. Re: Integrating Spry DataSet with YUI Calendar
          barb2466 Community Member

          I have played around with it a little following this tutorial: http://computerninja-webdesign.blogspot.com/2009/12/yui-calendar.html. Here is the new code.

           

          <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 dscalendarList = new Spry.Data.HTMLDataSet("dscalendarList.html", "eventDetails", {sortOnLoad: "Date", sortOrderOnLoad: "ascending"});

          dscalendarList.setColumnType("Date", "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].

            };

           

            function deselectHandler(event, data) {

            // The JavaScript function subscribed to yuicalendar1.  It is called when

            // a selected date cell is unselected.

            var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];

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

           

              var r = dscalendarList.findRowsWithColumnValues({"Date": formattedDateString }, true);

              var region = Spry.Data.getRegion("eventDetail");

              if(r){

              dscalendarList.setCurrentRow(r.ds_RowID);

              region.setState("showEvent", true);

              } else {

                  region.setState("ready", true);

              }

            };   

           

            // 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:detailregion="dscalendarList" id "eventDetail">

                         <table width="380" border="0" cellspacing="0" cellpadding="5">

                            <tr>

                              <td width="20%" align="right" valign="top"><strong>Name:</strong></td>

                              <td width="100%" align="left" valign="top"><div align="justify">{Name}</div></td>

                            </tr>

                            <tr>

                              <td align="right" valign="top"><strong>Date:</strong></td>

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

                            </tr>

                            <tr>

                              <td align="right" valign="top"><strong>Time:</strong></td>

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

                            </tr>

                            <tr>

                              <td align="right" valign="top"><strong>Location:</strong></td>

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

                            </tr>

                            <tr>

                              <td align="right" valign="top"><strong>Details:</strong></td>

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

                            </tr>

                      </table>

                    There are no events on this date. Please select another date.

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

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

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

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

          </body>

          </html>

           

          I am working on a localhost so I can't point to a site. The code for the dscalendarList.html is this

           

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

          <head>

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

          <title>Untitled Document</title>

          </head>

           

          <body>

          <table id="eventDetails" border="0" cellpadding="5">

            <tr>

              <td width="15%">Name</td>

              <td width="10%">Date</td>

              <td width="10%">Time</td>

              <td width="25%">Location</td>

              <td width="45%">Details</td>

            </tr>

            <tr>

              <td>Prayer Warriors Prayer Time</td>

              <td>04/06/2012</td>

              <td>6:30PM</td>

              <td>Auditorium</td>

              <td>The prayer warrior team will be meeting to pray together for the church.</td>

            </tr>

            <tr>

              <td>Youth Fellowship</td>

              <td>04/06/2012</td>

              <td>7:30PM</td>

              <td>Auditorium</td>

              <td> All  youth is invited.</td>

            </tr>

            <tr>

              <td>Prayer Time</td>

              <td>04/20/2012</td>

              <td>6:30PM</td>

              <td>Auditorium</td>

              <td>  Meet to pray together and/or to receive prayer. Bring your prayer needs, worries or concerns.</td>

            </tr>

          </table>

          </body>

          </html>

           

          Is there a way to show multiple Events if they are scheduled on the same date as in my case?

          Still when the calendar.html page loads only the information for Prayer Warriors Prayer Time on 04/06/2012 shows. Showing right below it is "There are no events on this date. Please select another date." Nothing happens when any date is clicked. Help please!!!

          • 3. Re: Integrating Spry DataSet with YUI Calendar
            barb2466 Community Member

            Thanks. Helps but does not answer the spry problem.

            • 4. Re: Integrating Spry DataSet with YUI Calendar
              Ben Pleysier CommunityMVP

              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

              • 5. Re: Integrating Spry DataSet with YUI Calendar
                barb2466 Community Member

                I must say off the cuff that I am still a novice in JavaScript.

                 

                I am not saying the DMXzone Calendar 2 is not good or cannot be used. Infact it is perfect. Sorry if it came accross a different way. Thanks Altruistic Gramps.

                 

                Instead of moving to another software, I really wanted to solve the problem using the Spry. Anyway, I played around with it and finally I was able to solve it. I thought I will share it here.

                 

                Here's the thing: I found out that Spry is not the problem at all but rather how one can manupulate the yahoo YUI to do what you want it to do. Also the date format is important. I know some say the date format should be, for example, 04/05/2012. This did not work for me. I had to change my date format to 4/5/2012. Then for the highlighting, I used the built-in renderers (find it here http://developer.yahoo.com/yui/examples/calendar/render.html or http://developer.yahoo.com/yui/examples/calendar/index.html). To cut the long story short, I will paste my code below.

                 

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

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

                <title>Untitled Document</title>

                </head>

                 

                <body>

                   

                    <div id="CalendarView">

                        <div id="CalendarViewInfo">

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

                            <p>Click any highlighted date on the calendar below to see events and their scheduled times.</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");

                    yuicalendar1.addRenderer("4/6/2012, 4/16/2012, 4/20/2012, 5/18/2012", yuicalendar1.renderCellStyleHighlight1); //I added this. See http://developer.yahoo.com/yui/examples/calendar/render.html for this is done

                    //(var yuicalendar1 = new YAHOO.widget.CalendarGroup("yuicalendar1", {PAGES:2}); I added this to show more than one calendar. was not originally part of the calendar)

                 

                    // 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 dateToLocaleString(dt, cal) {

                //var wStr = cal.cfg.getProperty("WEEKDAYS_LONG")[dt.getDay()];

                //var dStr = dt.getDate();

                //var mStr = cal.cfg.getProperty("MONTHS_LONG")[dt.getMonth()];

                //var yStr = dt.getFullYear();

                //return (wStr + ", " + dStr + " " + mStr + " " + yStr);

                //}

                 

                  function selectHandler(event, data) {

                     

                //var dataarray = data[0];

                //var selecteddata = dataarray[0];

                //var selecteddate = this.toDate(selecteddata);

                //var datetextfield = document.getElementById('date');

                //datetextfield.value = dateToLocaleString(selecteddate, this);

                 

                 

                  // 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 = dscalendarList.findRowsWithColumnValues({"Date": formattedDateString }, true);

                    var region = Spry.Data.getRegion("eventDetail");

                    if(r){

                    dscalendarList.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:detailregion="dscalendarList" id="eventDetail">

                               <div spry:state="showEvent">

                            <table width="380" border="0" cellspacing="0" cellpadding="5">

                                  <tr>

                                    <td width="20%" align="right" valign="top"><strong>Name:</strong></td>

                                    <td width="100%" align="left" valign="top"><div align="justify">{Name}</div></td>

                                  </tr>

                                  <tr>

                                    <td align="right" valign="top"><strong>Date:</strong></td>

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

                                  </tr>

                                  <tr>

                                    <td align="right" valign="top"><strong>Time:</strong></td>

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

                                  </tr>

                                  <tr>

                                    <td align="right" valign="top"><strong>Location:</strong></td>

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

                                  </tr>

                                  <tr>

                                    <td align="right" valign="top"><strong>Details:</strong></td>

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

                                  </tr>

                            </table>

                          </div>

                          <div spry:state="ready">There are no events on this date. Please select another date.</div>

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

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

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

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

                   

                </body>

                </html>

                 

                I hope this helps all.