<div class="intro">

<p>This example uses the dynamic loading capability built into YUI to pull in additional components as needed. In addition, it demonstrates how to define external modules that can be loaded alongside YUI. </p>

<p>This example works as follows:</p>

<ol>

<li>A <code>YUI</code> instance is created with a configuration object that defines parameters we need to dynamically load new modules.</li>

<li><code>node</code> is used so that we can bind an event listener to a button. YUI will dynamically fetch <code>node</code> and its dependencies. By default, these dependencies will be fetched from the Yahoo! CDN and will be combined into a single file.</li>

<li>A click listener is added to a button.</li>

<li>When this button is clicked, YUI will dynamically fetch YUI 3 Drag &amp; Drop and YUI 2 Calendar files. The CSS file will be fetched first; this helps prevent a flash of unstyled content when the Calendar Control is loaded. This file is inserted above a style block which contains our custom calendar styles (via a YUI config option) so that styles are applied in the correct order.</li>

<li>A Calendar instance is created, and it is made draggable.</li>

</ol>

</div>

<div class="example">

{{>yui-loader-ext}}

</div>

<h3>Creating your YUI instance</h3>

<p>First, we need to create our YUI instance with the <code>node</code> module, so we can attach a listener to a button.</p>

```

YUI().use('node', function(Y) {

});

```

<p>YUI accepts a configuration object when you create an instance. Your dynamic-loading options can be defined here.</p>

```

{{>yui-loader-ext-config}}

YUI(config).use('node', function(Y) {

});

```

<h3>Creating the Calendar</h3>

<p>Now that we have our core YUI instance in place, we add an event listener to

a button that will dynamically load YUI 3 Drag &amp; Drop and YUI 2 Calendar.</p>

```

{{>yui-loader-ext-logic}}

```

<h3>Full Example Source</h3>

```

{{>yui-loader-ext}}

```