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

4000Re: Calendar

Expand Messages
  • bluetopbrown
    Aug 16, 2006
    • 0 Attachment
      Change your calendar container so that it uses absolute positioning:
      <div id="cal1Container" style="position:absolute;"></div>

      You will then have to position the container where you want. In
      example of that is:

      var pos = YAHOO.util.Dom.getXY(calfield);
      YAHOO.util.Dom.setXY(cal1Container,[pos[0],pos[1]+calfield.offsetHeight+1]);

      The setXY method did not work for me, but it seems to work on the
      calendar example pages. You can substitute that with something like:

      cal1Container.style.top = pos[1]+calfield.offsetHeight+1];
      cal1Container.style.left = pos[0];

      Hope it helps

      --- In ydn-javascript@yahoogroups.com, "hovh03" <hovh03@...> wrote:
      >
      > --- In ydn-javascript@yahoogroups.com, "hovh03" <hovh03@> wrote:
      > >
      > >
      > > Hi,
      > >
      > > Is it possible to do a popup calendar? How to automatically wire a
      > > calendar to a field? (such as a text field, and when popup by clicking
      > > on a [...] button, the calendar initialize to this field and show up,
      > > and when select a date, then calendar change the value of the field)
      > >
      > > Thanks,
      > >
      > > hovh03
      > >
      >
      > I am replying to my own message here. I still need help though,
      > because may issues I encounter below.
      >
      > Below is my hacked code. This however, does not work well. The
      > problem is that the calendar is embedded in the page, so it pushes
      > things down as it pops up. Also, it does not go away if a user clicks
      > outside of the calendar, or if a user clicks on the [...] again (this
      > part can be hacked too). Here's the code.
      > [CODE]
      >
      > //JavaScript code:
      >
      > var cal1;
      > function init() {
      > cal1 = new
      > YAHOO.widget.Calendar("cal1","cal1Container", "08/20/2006");
      > cal1.onSelect = function() {
      > var calfield = document.getElementById("calfield");
      > if (!calfield) {
      > return;
      > }
      > calfield.value = cal1.getSelectedDates();
      > var calElement =
      > document.getElementById("cal1Container");
      > if (calElement) {
      > calElement.style.display = "none";
      > }
      >
      > };
      > }
      > function render() {
      > if (cal1 == null) {
      > init();
      > }
      > cal1.render();
      > var calElement =
      document.getElementById("cal1Container");
      > if (calElement) {
      > calElement.style.display = "block";
      > }
      > }
      >
      >
      > //Here's html code:
      >
      > <form method="post" action=".">
      > Calendar: <input type="text" size="15" name="calfield"
      > id="calfield" />
      > <input type="button" onclick="render()" name="button"
      > value="..." />
      > </form>
      > <div id="cal1Container"></div>
      > <br/><br/><br>Some text goes here<br/>
      >
      >
      > [/CODE]
      >
    • Show all 10 messages in this topic