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

Calendar Widget

Expand Messages
  • mori57
    I created a subclass of the Calendar widget, but one of my testers today found an interesting issue. Today s date (Oct 31, 2006) was selected by the Calendar.
    Message 1 of 5 , Oct 31, 2006
    • 0 Attachment
      I created a subclass of the Calendar widget, but one of my testers
      today found an interesting issue.

      Today's date (Oct 31, 2006) was selected by the Calendar. When the
      user clicked on the "next month" button, which calls the base class'
      nextMonth() method, instead of the display going to the next month
      (November), the display changed to December.

      I've traced it down as far as the DateMath.add functionality, but I'm
      a bit at a loss for why the code that handles adding a month to a date
      doesn't constrain the result to being -in- the next month.

      Adding a month to Oct 31, to my thought process, should take me to the
      -end- of Nov, just like flipping page-by-page through a physical
      calendar. Most users would not expect it to flip you to the beginning
      of December.

      Any thoughts on what I can do to create the effect that is going to
      make the most sense to my users?

      Thanks for any pointers in the right direction!

      Jason M. Batchelor
    • mori57
      Addendum: I rechecked the samples that come with the YUI, and they work the way I expect them to, so I guess it s somewhere in my subclass. Having a hell of a
      Message 2 of 5 , Oct 31, 2006
      • 0 Attachment
        Addendum:
        I rechecked the samples that come with the YUI, and they work the way
        I expect them to, so I guess it's somewhere in my subclass. Having a
        hell of a time figuring out where, though.
      • Steven Peterson
        Something to keep in mind - the Calendar s page date should always be set as the first day of the month. When you pass it into the constructor, you pass it in
        Message 3 of 5 , Oct 31, 2006
        • 0 Attachment

          Something to keep in mind – the Calendar’s page date should always be set as the first day of the month. When you pass it into the constructor, you pass it in as “10/2006”, for instance. If you set the Calendar’s page date (not the selected date) to 10/31, and then hit nextMonth, it will definitely take you into December, since there is no 31st of November. I’m pretty sure that’s probably what’s going on with your subclass. Let me know if that helps!

           

           

          Steven Peterson

          Web Developer, Platform Engineering

          Yahoo!

           

           

           

          From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of mori57
          Sent: Tuesday, October 31, 2006 1:19 PM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] Re: Calendar Widget

           

          Addendum:
          I rechecked the samples that come with the YUI, and they work the way
          I expect them to, so I guess it's somewhere in my subclass. Having a
          hell of a time figuring out where, though.

        • mori57
          ... set as ... pass ... (not ... definitely take ... that ... set as ... pass ... (not ... definitely take ... that ... Thanks, Steve. I decided to go a bit
          Message 4 of 5 , Nov 1, 2006
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "Steven Peterson" <peterson@...> wrote:
            >
            > Something to keep in mind - the Calendar's page date should always be set as
            > the first day of the month. When you pass it into the constructor, you pass
            > it in as "10/2006", for instance. If you set the Calendar's page date (not
            > the selected date) to 10/31, and then hit nextMonth, it will definitely take
            > you into December, since there is no 31st of November. I'm pretty sure
            > that's probably what's going on with your subclass. Let me know if that
            > helps!
            >
            >
            >
            >
            >
            > Steven Peterson
            >
            > Web Developer, Platform Engineering
            >
            > Yahoo!
            >
            --- In ydn-javascript@yahoogroups.com, "Steven Peterson" <peterson@...> wrote:
            >
            > Something to keep in mind - the Calendar's page date should always be set as
            > the first day of the month. When you pass it into the constructor, you pass
            > it in as "10/2006", for instance. If you set the Calendar's page date (not
            > the selected date) to 10/31, and then hit nextMonth, it will definitely take
            > you into December, since there is no 31st of November. I'm pretty sure
            > that's probably what's going on with your subclass. Let me know if that
            > helps!
            >

            >

            >
            > Steven Peterson
            >
            > Web Developer, Platform Engineering
            >
            > Yahoo!

            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
          • mori57
            ... dteMonthToShow, ... Further update. Here s more script: YAHOO.myapp.CalPanel = function(el, userConfig, dteMonthToShow, dteSelectedDate) {
            Message 5 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.