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
    • 0 Attachment
      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
      • 0 Attachment
        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.