Turn-a-DIV-tag-to-a-log-panel


            



    
Handling Calendar Events

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}







  #cal1Container {
     margin:1em;
  }
  #caleventlog {
    float:left;
    width:35em;
    margin:1em;
    background-color:#eee;
    border:1px solid #000;
  }
  #caleventlog .bd {
    overflow:auto;
    height:20em;
    padding:5px;
  }
  #caleventlog .hd {
    background-color:#aaa;
    border-bottom:1px solid #000;
    font-weight:bold;
    padding:2px;
  }
  #caleventlog .entry {
    margin:0;  
  }




Handling Calendar Events


  The Calendar control exposes a number of CustomEvents, so that applications can listen for and react to interesting moments in the Calendar's operation. This example demonstrates how to listen for the select and deselect events, which are fired whenever a date in the Calendar is selected or deselected.




  YAHOO.namespace("example.calendar");
  YAHOO.example.calendar.init = function() {
    var eLog = YAHOO.util.Dom.get("evtentries");
    var eCount = 1;
    function logEvent(msg) {
      eLog.innerHTML = '' + eCount + '). ' + msg + '' + eLog.innerHTML;
      eCount++;
    }
    function dateToLocaleString(dt, cal) {
                  var wStr = cal.cfg.getProperty("WEEKDAYS_LONG")[dt.getDay()];
                  var dStr = dt.getDate();
                  var mStr = cal.cfg.getProperty("MONTHS_LONG")[dt.getMonth()];
                    var yStr = dt.getFullYear();
                  return (wStr + ", " + dStr + " " + mStr + " " + yStr);
    }
    function mySelectHandler(type,args,obj) {
      var selected = args[0];
      var selDate = this.toDate(selected[0]);
       
      logEvent("SELECTED: " + dateToLocaleString(selDate, this));
    };
    function myDeselectHandler(type, args, obj) {
      var deselected = args[0];
      var deselDate = this.toDate(deselected[0]);
      logEvent("DESELECTED: " + dateToLocaleString(deselDate, this));
    };
    YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
    YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
    YAHOO.example.calendar.cal1.deselectEvent.subscribe(myDeselectHandler, YAHOO.example.calendar.cal1, true);
    YAHOO.example.calendar.cal1.render();
  }
  YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);

YUI Library JavaScript DHTML

Handling Calendar Events