YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: YUI 2.x and 3.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.8.0/build/calendar/assets/skins/sam/calendar.css"><!-- js --><script type="text/javascript" src="http://yui.yahooapis.com/2.8.0/build/yahoo-dom-event/yahoo-dom-event.js"></script><script type="text/javascript" src="http://yui.yahooapis.com/2.8.0/build/calendar/calendar-min.js"></script>

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

<!-- css --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0/build/calendar/assets/skins/sam/calendar.css"> <!-- js --> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0/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) {});

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

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();});

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

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();});

    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();
    });

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();});

    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();
    });

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