YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: YUI 2.x and 3.x

Note: This is YUI 3.x. Looking for YUI 2.x?

## The YUI Global Object: YUI 2.x and 3.x

This example shows how to use YUI 2.x and 3.x at the same time as well as interacting with each other. We will make a 2.x Calendar Control draggable with 3.x Drag & Drop and use 3.x's Node to handle the Calendar's Select Event.

View example in new window.

Click a date..

### Including YUI 2.x

First we will include the code for the 2.x Calendar Control and its dependencies.

<!-- css --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css"> <!-- js --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js"></script>

### Creating your YUI instance

Now we need to create our YUI instance with the `dd-drag` module, so we can make the calendar draggable.

YUI().use('dd-drag', function(Y) { });

### Creating the Calendar

Now that we have our tools in place, let's create the calendar.

YUI().use('dd-drag', function(Y) { var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont'); cal1.render(); });

### Making it draggable

Now we make the calendar draggable with the 3.x `dd-drag` module.

YUI().use('dd-drag', function(Y) { var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont'); cal1.renderEvent.subscribe(function() { var dd = new Y.DD.Drag({ node: '#cal1Cont' }).addHandle('div.calheader'); }); cal1.render(); });

### Handling the Calendars Select Event with Node

Now we need to hook up the `selectEvent` and handle that with 3.x's `Node`.

YUI().use('dd-drag', function(Y) { var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont'); cal1.renderEvent.subscribe(function() { var dd = new Y.DD.Drag({ node: '#cal1Cont' }).addHandle('div.calheader'); }); cal1.selectEvent.subscribe(function(e, dates) { var d = dates[0][0]; var dateStr = d[1] + '/' + d[2] + '/' + d[0]; Y.Node.get('#results').set('innerHTML', 'You clicked on: ' + dateStr); }); cal1.render(); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings