YUI Library JavaScript DHTML


            



    
Calendar Navigator

/*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;
}







  #cal2Container { clear:left;margin-top:10px }




Calendar Navigator


  This example shows you how to enable and configure the Calendar Navigator, which will allow users to quickly jump to a specific year/month without having to scroll through months sequentially.



    YAHOO.namespace("example.calendar");
    YAHOO.example.calendar.init = function() {
        // Enable navigator with the default configuration
        YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1Container", {navigator:true});
        YAHOO.example.calendar.cal1.render();
        
        // Enable navigator with a custom configuration
        var navConfig = {
            strings : {
                month: "Choose Month",
                year: "Enter Year",
                submit: "OK",
                cancel: "Cancel",
                invalidYear: "Please enter a valid year"
            },
            monthFormat: YAHOO.widget.Calendar.SHORT,
            initialFocus: "year"
        };
        YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar("cal2Container", {navigator: navConfig});
        YAHOO.example.calendar.cal2.render();
    }
    YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);






   
   
yui_2.7.0b.zip( 4,431 k)