Loading ...
Sorry, an error occurred while loading the content.
 

YUI Calendar - Shaded Cells When Content is Present

Expand Messages
  • vicky1more
    Hello, I m trying to get date cells to have a shaded background color when if there is an event occurring on a particular day. I m using some spry code from
    Message 1 of 3 , Sep 8, 2009
      Hello,

      I'm trying to get date cells to have a shaded background color when if there is an event occurring on a particular day. I'm using some spry code from Adobe forums to display event data but I can't seem to figure out how to have the active date cells highlight. Does anyone know how to to do this?

      Here's the code I'm working with:

      <!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>calendarData.html</title>
      <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 dsCourses = new Spry.Data.HTMLDataSet("schedule.htm", "classSched");
      var eventdate = new Spry.Data.HTMLDataSet("schedule.htm", "edate");
      //-->
      </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="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) {
      //This new function takes the data array returned by the calendar when clicked and formats it into a string that matches the date column in the Spry detail region table.
      var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];

      // variable to search the dataset for the selected date:
      var r = dsCourses.findRowsWithColumnValues({"Date": formattedDateString }, true);

      // variable that will display the course data if a matching date is found:
      var region = Spry.Data.getRegion("classDetail");


      if®{

      dsCourses.setCurrentRow(r.ds_RowID);
      region.setState("showClass", true);
      } else {
      region.setState("ready", true);
      }

      // 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.
      };

      // Create the YUI Calendar when the HTML document is usable.
      YAHOO.util.Event.onDOMReady(inityuicalendar1);


      // EndWebWidget YUI_Calendar: yuicalendar1

      </script>

      <div spry:detailregion="dsCourses" id="classDetail">
      <div spry:state="showClass">
      <table width="350" border="0">
      <tr>
      <td colspan="3"><h2>{dsCourses::Class}</h2></td>
      </tr>
      <tr>
      <td width="36" rowspan="2">{dsCourses::Logo}</td>
      <td colspan="2">{dsCourses::Description}</td>
      </tr>
      <tr>
      <td>{dsCourses::Location}</td>
      <td>{dsCourses::Date}</td>
      </tr>
      </table>
      </div>

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

      </div>
      </body>
      </html>
    • vicky1more
      Hello, I m trying to get date cells to have a shaded background color when if there is an event occurring on a particular day. I m using some spry code from
      Message 2 of 3 , Sep 8, 2009
        Hello,

        I'm trying to get date cells to have a shaded background color when if there is an event occurring on a particular day. I'm using some spry code from Adobe forums to display event data but I can't seem to figure out how to have the active date cells highlight. Does anyone know how to to do this?

        Here's the code I'm working with:

        <!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>calendarData.html</title>
        <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 dsCourses = new Spry.Data.HTMLDataSet("schedule.htm", "classSched");
        var eventdate = new Spry.Data.HTMLDataSet("schedule.htm", "edate");
        //-->
        </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="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) {
        //This new function takes the data array returned by the calendar when clicked and formats it into a string that matches the date column in the Spry detail region table.
        var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];

        // variable to search the dataset for the selected date:
        var r = dsCourses.findRowsWithColumnValues({"Date": formattedDateString }, true);

        // variable that will display the course data if a matching date is found:
        var region = Spry.Data.getRegion("classDetail");


        if®{

        dsCourses.setCurrentRow(r.ds_RowID);
        region.setState("showClass", true);
        } else {
        region.setState("ready", true);
        }

        // 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.
        };

        // Create the YUI Calendar when the HTML document is usable.
        YAHOO.util.Event.onDOMReady(inityuicalendar1);


        // EndWebWidget YUI_Calendar: yuicalendar1

        </script>

        <div spry:detailregion="dsCourses" id="classDetail">
        <div spry:state="showClass">
        <table width="350" border="0">
        <tr>
        <td colspan="3"><h2>{dsCourses::Class}</h2></td>
        </tr>
        <tr>
        <td width="36" rowspan="2">{dsCourses::Logo}</td>
        <td colspan="2">{dsCourses::Description}</td>
        </tr>
        <tr>
        <td>{dsCourses::Location}</td>
        <td>{dsCourses::Date}</td>
        </tr>
        </table>
        </div>

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

        </div>
        </body>
        </html>
      • Satyen Desai
        Hi, Calendar s Custom Renderer support should let you do this. Take a look at the following formal example:
        Message 3 of 3 , Sep 11, 2009
          Hi,
          Calendar's Custom Renderer support should let you do this.

          Take a look at the following formal example:
          http://developer.yahoo.com/yui/examples/calendar/render.html

          And these informal ones:
          http://yuiblog.com/sandbox/yui/v250/examples/calendar/addingRenderers.html
          http://yuiblog.com/sandbox/yui/v252/examples/calendar/eventCalendar.html

          Regards,
          Satyen


          On Sep 8, 2009, at 9:19 AM, vicky1more wrote:

          > Hello,
          >
          > I'm trying to get date cells to have a shaded background color when
          > if there is an event occurring on a particular day. I'm using some
          > spry code from Adobe forums to display event data but I can't seem
          > to figure out how to have the active date cells highlight. Does
          > anyone know how to to do this?
          >
          > Here's the code I'm working with:
          >
          > <!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>calendarData.html</title>
          > <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 dsCourses = new Spry.Data.HTMLDataSet("schedule.htm",
          > "classSched");
          > var eventdate = new Spry.Data.HTMLDataSet("schedule.htm", "edate");
          > //-->
          > </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="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) {
          > //This new function takes the data array returned by the calendar
          > when clicked and formats it into a string that matches the date
          > column in the Spry detail region table.
          > var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/"
          > + data[0][0][0];
          >
          > // variable to search the dataset for the selected date:
          > var r = dsCourses.findRowsWithColumnValues({"Date":
          > formattedDateString }, true);
          >
          > // variable that will display the course data if a matching date is
          > found:
          > var region = Spry.Data.getRegion("classDetail");
          >
          > if®{
          >
          > dsCourses.setCurrentRow(r.ds_RowID);
          > region.setState("showClass", true);
          > } else {
          > region.setState("ready", true);
          > }
          >
          > // 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.
          > };
          >
          > // Create the YUI Calendar when the HTML document is usable.
          > YAHOO.util.Event.onDOMReady(inityuicalendar1);
          >
          > // EndWebWidget YUI_Calendar: yuicalendar1
          >
          > </script>
          >
          > <div spry:detailregion="dsCourses" id="classDetail">
          > <div spry:state="showClass">
          > <table width="350" border="0">
          > <tr>
          > <td colspan="3"><h2>{dsCourses::Class}</h2></td>
          > </tr>
          > <tr>
          > <td width="36" rowspan="2">{dsCourses::Logo}</td>
          > <td colspan="2">{dsCourses::Description}</td>
          > </tr>
          > <tr>
          > <td>{dsCourses::Location}</td>
          > <td>{dsCourses::Date}</td>
          > </tr>
          > </table>
          > </div>
          >
          > <div spry:state="ready">
          > There are no classes on this date. Please select another date.
          > </div>
          >
          > </div>
          > </body>
          > </html>
          >
          >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.