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

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

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>

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

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

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

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