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

YUI Calendar- rendering highlighted cells in javascript

Expand Messages
  • deke6868
    Hello. I am new to this to bear with me. I would like to use the YUI calendar in its simplest form; to display highlighted cells as blocked out dates for a
    Message 1 of 2 , Feb 12, 2009
      Hello.

      I am new to this to bear with me. I would like to use the YUI
      calendar in its simplest form; to display highlighted cells as blocked
      out dates for a rental property. I have the calendar widget installed
      through Dreamweaver's extension manager and can see that there is a
      way to add javascript to the web page that handles this event without
      having to link it to a database, but I don't know how or where to set
      up the correct code to do this. Here is the javascript that is
      currently loaded onto this page and it displays properly:

      <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",{navigator:true});

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

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


      // EndWebWidget YUI_Calendar: yuicalendar1
      </script>

      Any help would be appreciated. I should note that I can handle
      changing the highlighted cells colors in the calendar's CSS file, but
      that's about it!! I do want more than one highlighted color option, so
      if you can just point me in the right direction, I can handle the rest.

      Thanks,
      Chris
    • k6rks
      Chris, I m not sure if this is what you are after, but to block off the middle weekdays of March you would use this call before the render:
      Message 2 of 2 , Mar 1, 2009
        Chris,

        I'm not sure if this is what you are after, but to block off the
        middle weekdays of March you would use this call before the render:

        yuicalendar1.select( "3/16/2009-3/20/2009" );

        I am doing a similar thing to show times available.

        Bob


        --- In ydn-javascript@yahoogroups.com, "deke6868" <deke6868@...>
        wrote:
        >
        > Hello.
        >
        > I am new to this to bear with me. I would like to use the YUI
        > calendar in its simplest form; to display highlighted cells as
        blocked
        > out dates for a rental property. I have the calendar widget
        installed
        > through Dreamweaver's extension manager and can see that there is a
        > way to add javascript to the web page that handles this event
        without
        > having to link it to a database, but I don't know how or where to
        set
        > up the correct code to do this. Here is the javascript that is
        > currently loaded onto this page and it displays properly:
        >
        > <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",{navigator:true});
        >
        > // 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.
        > };
        >
        > // Create the YUI Calendar when the HTML document is usable.
        > YAHOO.util.Event.onDOMReady(inityuicalendar1);
        >
        >
        > // EndWebWidget YUI_Calendar: yuicalendar1
        > </script>
        >
        > Any help would be appreciated. I should note that I can handle
        > changing the highlighted cells colors in the calendar's CSS file,
        but
        > that's about it!! I do want more than one highlighted color option,
        so
        > if you can just point me in the right direction, I can handle the
        rest.
        >
        > Thanks,
        > Chris
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.