Posted on Leave a comment

YUI Calendar HTML Script

THIS EXAMPLE CODE is part of our YUI JavaScript tutorial. It creates a calendar that you can add events to.

Follow along with the tutorial to learn how to use it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns=""> <head> <title>YUI: Calendar example</title> <link rel="stylesheet" type="text/css" href=""> <script type="text/javascript" src=""></script> <script type="text/javascript"> function addDateText(type,args,obj) { var datedata = args[0][0]; var year = datedata[0]; var month = datedata[1]; var day = datedata[2]; document.forms[0].datefield.value = month+'/'+day+'/'+year; obj.hide(); } function init_calendar() { var cal = new YAHOO.widget.Calendar("cal", { title:"Choose a date:", close:true } ); cal.render(); cal.hide(); // Show Calendar when text field gets focus YAHOO.util.Event.addListener("datefield", "focus",, cal, true); // Save calendar value inside text field cal.selectEvent.subscribe(addDateText, cal, true); } YAHOO.util.Event.onDOMReady(init_calendar); </script> </head> <body class="yui-skin-sam"> <form> Date: <input type="text" id="datefield" /> <div id="cal"></div> </form> </body> </html>

I know that YUI Library is depreciated, but I will look into the further development of YUI in order to do similar things.

Leave a Reply

Your email address will not be published. Required fields are marked *