File Under: JavaScript
Feb
15
2010

YUI Calendar

By

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>YUI: Calendar example</title>



<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/fonts/fonts-min.css&2.6.0/build/calendar/assets/skins/sam/calendar.css&2.6.0/build/carousel/assets/skins/sam/carousel.css">

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/calendar/calendar-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/carousel/carousel-beta-min.js"></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.show, 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>
Tags: