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

120RE: [ydn-javascript] Calendar

Expand Messages
  • Steven Peterson
    Feb 16, 2006
    • 0 Attachment

      Paul,

       

      Thanks for the questions.  Let me try to field those for you:

       

      1. By unselectable, I suspect you mean that you want to set up a certain date so that it can’t be selected. The way to do this is to add a renderer function for that specific date. By default, we provide just such a function, called renderBodyCellRestricted. So, to say that February 28, 2006 cannot be selected, the code would be:

       

      cal1.addRenderer(“2/28/2006”, cal1.renderBodyCellRestricted);

       

      You would do this prior to rendering the calendar with cal.render(); This tells the calendar to execute renderBodyCellRestricted whenever it hits 2/28/2006 while it’s rendering. If you look at the code for this function, you’ll see that it has two arguments – workingDate and cell, which represents the calendar date and the cell to format, and that the return value is STOP_RENDER, which tells it not to execute anymore renderer functions for this date cell after this one.

       

      If you try adding this code to your local default example, you’ll see that 2/28 is now rendered with a strike-through on 2/28, and it can’t be selected anymore.

       

      1. This was a really interesting task, since current browser differences between IE and everyone else make this a little tough. We may consider adding row highlighting into a future release of Calendar. In the meantime, here’s a solution I came up with that I think does what you’re asking. You can try to put this in your default example file to see how it works.

       

      First, add this style block:

       

            <style>

                  /* highlight the whole row */

                  .calendar tr:hover td.calcell, .hilite-row .calcell {

                        background-color:yellow;

                  }

       

                  /* highlight the current cell in the standard highlight color */

                  .calendar tr:hover td:hover, .hilite-row .calcellhover {

                        cursor:pointer;

                        color:#FFF;

                        background-color:#FF9900;

                        border:1px solid #FF9900;

                  }

       

                  /* make sure out of month cells don't highlight too */

                  .calendar tr:hover td.oom, .hilite-row .calcell.oom {

                        cursor:default;

                        color:#999;

                        background-color:#EEE;

                        border:1px solid #E0E0E0;

                  }

            </style>

       

      Then, modify the init code as follows:

       

                  function init() {

                        cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");

                       

                        /* Override the doCellMouseOver function (used for IE) to add row highlighting) */

                        cal1.doCellMouseOver = function(e, cal) {

                              var cell = this;

                              var row = cell.parentNode;

       

                              YAHOO.widget.Calendar_Core.prependCssClass(this, cal.Style.CSS_CELL_HOVER);

                              YAHOO.widget.Calendar_Core.prependCssClass(row, "hilite-row");

                        }

       

                        /* Override the doCellMouseOut function (used for IE) to remove row highlighting) */

                        cal1.doCellMouseOut = function(e, cal) {

                              var cell = this;

                              var row = cell.parentNode;

       

                              YAHOO.widget.Calendar_Core.removeCssClass(this, cal.Style.CSS_CELL_HOVER);

                              YAHOO.widget.Calendar_Core.removeCssClass(row, "hilite-row");

                        }

       

                        cal1.render();

                  }

       

      This will achieve the effect you’re looking for, and it also takes into account browser differences. Let me know if that works for you. J

       

      Steven Peterson

      Web Developer, Platform Engineering

      Yahoo!


      From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Paul Roe
      Sent: Thursday, February 16, 2006 7:51 AM
      To: ydn-javascript@yahoogroups.com
      Subject: [ydn-javascript] Calendar

       

      This is mainly a post to request two specific examples of
      functionality of the calendar widget.
      1. I'd like to see an example where you can make and indiviual date
      unselectable.
      2. I'd also like to see an example that demonstrates how you would add
      a css class to the <TR> for a week so that when you mouse over a date
      a hover would kick off and the whole week's background-color would change.

      I just think that these two examples would help flush out some things
      that haven't been covered, of course anyone could create these it
      doesn't have to be the yahoo folks.




    • Show all 10 messages in this topic