YUI 3.x Home -

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.

Click a date..

Including YUI 2.x

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

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

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

Creating the Calendar

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

  1. YUI().use('dd-drag', function(Y) {
  2. var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
  3. cal1.render();
  4. });
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.

  1. YUI().use('dd-drag', function(Y) {
  2. var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
  3. cal1.renderEvent.subscribe(function() {
  4. var dd = new Y.DD.Drag({
  5. node: '#cal1Cont'
  6. }).addHandle('div.calheader');
  7. });
  8. cal1.render();
  9. });
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.

  1. YUI().use('dd-drag', function(Y) {
  2. var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
  3. cal1.renderEvent.subscribe(function() {
  4. var dd = new Y.DD.Drag({
  5. node: '#cal1Cont'
  6. }).addHandle('div.calheader');
  7. });
  8. cal1.selectEvent.subscribe(function(e, dates) {
  9. var d = dates[0][0];
  10. var dateStr = d[1] + '/' + d[2] + '/' + d[0];
  11. Y.Node.get('#results').set('innerHTML', 'You clicked on: ' + dateStr);
  12. });
  13. cal1.render();
  14. });
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