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

Calendar

Expand Messages
  • Paul Roe
    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
    Message 1 of 10 , Feb 16, 2006
    • 0 Attachment
      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.
    • Steven Peterson
      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
      Message 2 of 10 , 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.




      • Paul Roe
        WOW Steven Thanks, those were great examples! you hit both on the head as to what I was looking for! Thanks again. ... add a ... just such a ... 28, 2006 ...
        Message 3 of 10 , Feb 22, 2006
        • 0 Attachment
          WOW Steven Thanks, those were great examples! you hit both on the head
          as to what I was looking for! Thanks again.

          --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
          <peterson@...> wrote:
          >
          > 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.
          >
          >
          >
          > 2. 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. :-)
          >
          >
          >
          > 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.
          >
          >
          >
          >
          >
          >
          > SPONSORED LINKS
          >
          >
          > C
          >
          <http://groups.yahoo.com/gads?t=ms&k=C+programming+language&w1=C+programming
          >
          +language&w2=Computer+programming+languages&w3=Java+programming+language&w4=
          >
          The+c+programming+language&w5=C+++programming+language&w6=Concept+of+program
          > ming+language&c=6&s=194&.sig=lC1PxfzvANy_Br-nPkXYTA> programming
          language
          >
          > Computer
          >
          <http://groups.yahoo.com/gads?t=ms&k=Computer+programming+languages&w1=C+pro
          >
          gramming+language&w2=Computer+programming+languages&w3=Java+programming+lang
          >
          uage&w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of
          > +programming+language&c=6&s=194&.sig=7XFXh-0Mon1IfLuOVlwvdg>
          programming
          > languages
          >
          > Java
          >
          <http://groups.yahoo.com/gads?t=ms&k=Java+programming+language&w1=C+programm
          >
          ing+language&w2=Computer+programming+languages&w3=Java+programming+language&
          >
          w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+prog
          > ramming+language&c=6&s=194&.sig=UITodqn0qTCUcae_mpRQog> programming
          > language
          >
          >
          > The
          >
          <http://groups.yahoo.com/gads?t=ms&k=The+c+programming+language&w1=C+program
          >
          ming+language&w2=Computer+programming+languages&w3=Java+programming+language
          >
          &w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+pro
          > gramming+language&c=6&s=194&.sig=xnZC2-BzDSLhhir3MLtssg> c programming
          > language
          >
          > C
          >
          <http://groups.yahoo.com/gads?t=ms&k=C+++programming+language&w1=C+programmi
          >
          ng+language&w2=Computer+programming+languages&w3=Java+programming+language&w
          >
          4=The+c+programming+language&w5=C+++programming+language&w6=Concept+of+progr
          > amming+language&c=6&s=194&.sig=RTzTl3BOJWbWK14CdUrO0w> programming
          language
          >
          >
          > Concept
          >
          <http://groups.yahoo.com/gads?t=ms&k=Concept+of+programming+language&w1=C+pr
          >
          ogramming+language&w2=Computer+programming+languages&w3=Java+programming+lan
          >
          guage&w4=The+c+programming+language&w5=C+++programming+language&w6=Concept+o
          > f+programming+language&c=6&s=194&.sig=x4ueM0tA417JDq3ckdJ9CQ> of
          > programming language
          >
          >
          >
          > _____
          >
          > YAHOO! GROUPS LINKS
          >
          >
          >
          > * Visit your group "ydn-javascript
          > <http://groups.yahoo.com/group/ydn-javascript> " on the web.
          >
          > * To unsubscribe from this group, send an email to:
          > ydn-javascript-unsubscribe@yahoogroups.com
          > <mailto:ydn-javascript-unsubscribe@yahoogroups.com?subject=Unsubscribe>
          >
          > * Your use of Yahoo! Groups is subject to the Yahoo!
          > <http://docs.yahoo.com/info/terms/> Terms of Service.
          >
          >
          >
          > _____
          >
        • hovh03
          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 [...]
          Message 4 of 10 , Aug 16, 2006
          • 0 Attachment
            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
          • 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
            Message 5 of 10 , Aug 16, 2006
            • 0 Attachment
              --- 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]
            • bluetopbrown
              Change your calendar container so that it uses absolute positioning: You will then have to position
              Message 6 of 10 , 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]
                >
              • hovh03
                Thanks, that works. ... YAHOO.util.Dom.setXY(cal1Container,[pos[0],pos[1]+calfield.offsetHeight+1]); ... clicking ... show up, ...
                Message 7 of 10 , Aug 16, 2006
                • 0 Attachment
                  Thanks, that works.

                  --- In ydn-javascript@yahoogroups.com, "bluetopbrown" <xsokev@...> wrote:
                  >
                  > 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]
                  > >
                  >
                • fcko9
                  I have the calendar being called from an include file that is loaded on every page. Since 90% of my pages include a calendar field. On the few pages that do
                  Message 8 of 10 , Jul 2 11:40 AM
                  • 0 Attachment
                    I have the calendar being called from an include file that is loaded
                    on every page. Since 90% of my pages include a calendar field. On the
                    few pages that do not contain the field I'm getting a

                    this.oDomContainer has no properties
                    [Break on this error] this.oDomContainer.innerHTML = html.join("\n");

                    from firebug. Is there anyway to work around this. I have tried
                    wrapping the whole javascript in a
                    if(document.forms.myform.callContainer) but I'm assuming since its in
                    the headers before the form element loads its not working.

                    Any ideas would be great.

                    Jim
                  • glrmac07
                    Hi, I have the YUI Calendar on a webpage. I am trying to find the JS code that will link a date in the calendar to my data set so that the date will display
                    Message 9 of 10 , Jul 5 6:14 AM
                    • 0 Attachment
                      Hi,

                      I have the YUI Calendar on a webpage. I am trying to find the JS code that will link a date in the calendar to my data set so that the date will display that event. I don't know how to link the two together. Can someone point me in the right direction to entering the js code into my webpage to do this?

                      Thanks in advance,

                      Glenn
                    • theblargoner
                      I m not certain what you mean by the event of your data set. Do you want the selection of a date on the calendar to trigger some other code you have? In that
                      Message 10 of 10 , Jul 5 12:57 PM
                      • 0 Attachment
                        I'm not certain what you mean by the event of your data set. Do you want the selection of a date on the calendar to trigger some other code you have? In that case you should subscribe to selectEvent:

                        http://developer.yahoo.com/yui/docs/YAHOO.widget.Calendar.html#event_selectEvent

                        Good examples here:

                        http://developer.yahoo.com/yui/examples/calendar/events.html

                        Let me know if that's not what you meant.
                        John

                        --- In ydn-javascript@yahoogroups.com, "glrmac07" <glrmac07@...> wrote:
                        >
                        > Hi,
                        >
                        > I have the YUI Calendar on a webpage. I am trying to find the JS code that will link a date in the calendar to my data set so that the date will display that event. I don't know how to link the two together. Can someone point me in the right direction to entering the js code into my webpage to do this?
                        >
                        > Thanks in advance,
                        >
                        > Glenn
                        >
                      Your message has been successfully submitted and would be delivered to recipients shortly.