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

Re: [ydn-javascript] Using other events with the calendars

Expand Messages
  • Eric Miraglia
    Ken, This is a little bit confusing. Let me see if I can clarify. In a 2-up (or n-up, where n 1) mode, you have one actual Calendar_Core object for every
    Message 1 of 5 , Mar 18, 2006
    • 0 Attachment
      Ken,

      This is a little bit confusing.  Let me see if I can clarify.  

      In a 2-up (or n-up, where n>1) mode, you have one actual Calendar_Core object for every month being displayed.  Under the hood, each of those objects has its own API methods -- like onSelect, onChangePage, etc.  wireEvent is actually a method that allows you to set the API method (say, onBeforeSelect, or any of the "on*" methods listed in the API) on all the individual month calendars that comprise your n-up view.

      In other words, wireEvent is giving you access to your API methods, not to DOM events that fire on HTML elements within the calendar.

      One way to do what you're asking -- to fire a function every time the mouse is over a date cell -- is to wire a single event listener to the container object.  When the function fires, use the Event Utility to get the target of the event, then traverse up the DOM until you get to a TD -- every date cell is contained within a TD.  Once you have a TD, you can use your Calendar object's cells property, which is an array of all those date-cell TD elements, to figure out the index number of the cell you're over.  The Calendar object's cellDates property is an array of dates parallel to cells, so if you know your TD is cells[i], then the date for this mouseover event is cellDates[i] -- an array in [yyyy, mm, dd] format.

      An example (works in FF and Safari, but I haven't tested it much) follows of how to do this.  It isn't cheap to fire actions on mouseover in this fashion, but this might get you where you're trying to go.  (And there would certainly be more efficient ways to write the code if you dig in and subclass the Calendar_Core class itself.)

      Regards,
      Eric


      <script>

      /*this will get called anytime the mouseover event registers on
      the element whose id is "cal1" -- so, pretty expensive*/
      function calMouseOver(e) {
      var dateOver = "";
      var myTarget = YAHOO.util.Event.getTarget(e, true) //get the target, but if text node get parent
      /*loop up through the dom, checking to see if our target
      is a TD; if it is, we'll look it up in the Calendar widget
      object and extract its date; if we ever loop to cal1 itself
      (or somehow beyond that) we'll stop.*/
      while ((myTarget.id!="cal1")&&(myTarget!=document)) {
      if(myTarget.tagName == "TD") {
      /*We have a td, so now let's check the date for that cell;
      cal1.cells is an array of td elements parallel to cal1.cellDates,
      which is an array of dates (the dates are in array format as well,
      so cal1.cellDates is an array of arrays.*/
      for(var i=0, k=cal1.cells.length; i<k; i++) {
      if(cal1.cells[i]==myTarget) {
      dateOver=cal1.cellDates[i];
      YAHOO.util.Dom.get("calOverDiv").innerHTML = "<p><strong>Entering:</strong> " + dateOver.toString() + "</p>" + YAHOO.util.Dom.get("calOverDiv").innerHTML;
      }
      }
      }
      /*step up the dom and try again:*/
      myTarget = myTarget.parentNode;
      }
      /*didn' find a td:*/
      return false;
      }


      var cal1;
      function init() {
      cal1 = new YAHOO.widget.Calendar("cal1","cal1Div");
      cal1.render();
      /*now, listen for the mouseover on cal1:*/
      YAHOO.util.Event.addListener("cal1","mouseover",calMouseOver);

      }

      YAHOO.util.Event.addListener(window,"load",init);

      </script>
      <title>calendar example</title></head>
      <body>
      <div id="cal1Div">
      </div>
      <div id="calOverDiv" style="clear:left;margin-top:10px;">
      </div>


      </body>
      </html>




      On Mar 17, 2006, at 3:01 PM, Ken Robinson wrote:

      I want to have something happen when I move the mouse over a cell in a calendar. I've been following all of the discussions and reading the documentation.

      In the documentation for the calendar group (which I am using) there is this:

      wireEvent

      void wireEvent
      Sets an event handler universally across all child calendars within the group. For instance, to set the onSelect handler for all child calendars to a function called fnSelect, the call would be: calGroup.wireEvent("onSelect", fnSelect);

      So I thought that to implement this routine, I would do:

               function init () {
                        cal1group = new YAHOO.widget.CalendarGroup(12,"cal1group", "cal1Container","1/<?php echo date('Y')?>");
                        cal1group.addRenderer(selectedDates, renderAppointmentDay);
                        cal1group.setChildFunction("onSelect", onSelect);
                        cal1group.wireEvent("onmouseover",onHover); // This is the line I added
                        cal1group.setChildFunction("onChangePage", write_calyear);
                        cal1group.render();

      This is the onHover routine:
               var onHover = function() {
                        alert('In onHover');
                        }

      When I test this nothing happens and no javascript errors are produced. The rest of my code works as it did before I added this.

      Is this how I add this event? If not, how is it done?

      Thanks in advance.

      Ken

      SPONSORED LINKS
      C programming language Computer programming languages Java programming language
      The c programming language C programming language Concept of programming language


      YAHOO! GROUPS LINKS





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