File Under: JavaScript

YUI Calendar

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="">


<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;



function init_calendar()


	var cal = new YAHOO.widget.Calendar("cal", { title:"Choose a date:", close:true } );



	// 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);





<body class="yui-skin-sam">


    Date: <input type="text" id="datefield" />

    <div id="cal"></div>