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

Re: Calendar Widget

Expand Messages
  • mori57
    ... dteMonthToShow, ... Further update. Here s more script: YAHOO.myapp.CalPanel = function(el, userConfig, dteMonthToShow, dteSelectedDate) {
    Message 1 of 5 , Nov 1, 2006
    • 0 Attachment
      > Thanks, Steve.
      > I decided to go a bit back to the drawing board in my design of my
      > object. I got the calendar portion working well in isolation, but I'm
      > having a different sort of trouble, now.
      >
      > I'm trying to embed the calendar into a YAHOO.widget.Panel, like so:
      >
      > this.objPanel = new YAHOO.widget.Panel(parentEl,
      > {fixedcenter:false,
      > constraintoviewport:true,
      > underlay:"shadow",
      > close:false,
      > visible:true,
      > draggable:false} );
      > this.objPanel.setBody("<div class=\"bd\" id=\"calCalendar\"></div>");
      > this.objPanel.render(parentEl);
      >
      > this.objCal = new YAHOO.myapp.Calendar(el,"calCalendar", dteMonthToShow,
      > dteSelectedDate);
      > this.objCal._parent = this;
      > this.objCal.render();
      >
      > However, when I run the script, I end up with this weird effect, where
      > the Panel renders as the header of the Panel, and an empty "body", and
      > it overlaps my calendar widget. Any experiences with embedding the
      > Calendar in a Panel? Should the two not be mixed if at all possible?
      >
      > Thanks for any advice in this area...
      >
      > Jason M. Batchelor
      >

      Further update. Here's more script:

      YAHOO.myapp.CalPanel = function(el, userConfig, dteMonthToShow, dteSelectedDate) {
          if(typeof(userConfig) == "undefined"){
              userConfig = { constraintoviewport: true, underlay:"shadow", close:false, visible:false, draggable:false, modal:false, width: "174px" };
      /* NOTE that if I do NOT set a width parameter, IE will show the calendar floating behind the grey "dropshadow" */
          }
          YAHOO.widget.Panel.superclass.constructor.call(this, el, userConfig);
         
          this.dateField = "";
          this.tempDate = "";
         
          this.setBody("<div id=\"calCalendar\"></div>");
          this.render(document.body);

          this.objCal = new YAHOO.myapp.Calendar(this,"calCalendar", dteMonthToShow, dteSelectedDate);
          this.objCal._parent = this;
          this.objCal.render();
      /* I had to add these next two lines to make certain that the Panel's size conforms to the width of the calendar
           widget. If I just "zero" the width (setting the width property to ""), IE does it's nasty business again of just showing
           the calendar behind the drop-shadow layer. Firefox, however, conforms the size of the Panel to its contents, as desired
      */
          var intCalWidth = YAHOO.util.Dom.getStyle("calCalendar","width");
          this.cfg.setProperty("width",(intCalWidth == "auto")? "166px" : intCalWidth+ "px");
          this.cfg.refireEvent("underlay");
      }

      YAHOO.extend(YAHOO.myapp.CalPanel, YAHOO.widget.Panel);


      Any thoughts on what might be causing IE to flip out without the width parameter being set? Anything I can look for in my CSS that might be causing it to do so?

      Thanks again,

      Jason M. Batchelor
    Your message has been successfully submitted and would be delivered to recipients shortly.