title: Javascript, Can't find variable
body: <p>I'm trying to add a javascript calendar(<a href="http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/" rel="nofollow">link</a>) to my website. So I added the HTML code, attached js and css files. When the page loads I'm getting the following error in the console:</p>
  
  <pre><code>[Error] ReferenceError: Can't find variable: jQuery
      global code (jquery.calendario.js, line 388)
  [Error] ReferenceError: Can't find variable: jQuery
      global code (dashboard, line 139)
  </code></pre>
  
  <p>I checked what's wrong with <code>jquery.calendario.js</code>, <code>line 388</code> and it has that code:
  <code>} )( jQuery, window );</code>.</p>
  
  <p>Also in dashboard file, <code>line 139</code>:
  <code>jQuery(function() {</code>.</p>
  
  <p>Any ideas on how to solve this one?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><strong>Header</strong></p>
  
  <pre><code>&lt;!-- Calendar CSS --&gt;
  &lt;link href="{% static "css/calendar.css" %}" rel="stylesheet"&gt;
  &lt;link href="{% static "css/calendar-style.css" %}" rel="stylesheet"&gt;
  &lt;!-- Modernizr Custom --&gt;
  &lt;script src="{% static "js/modernizr.custom.js" %}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="custom-calendar-wrap"&gt;
      &lt;div id="custom-inner" class="custom-inner"&gt;
        &lt;div class="custom-header clearfix"&gt;
          &lt;span id="custom-prev" class="custom-prev"&gt;&lt;/span&gt; &lt;span id="custom-next" class=
          "custom-next"&gt;&lt;/span&gt;
  
          &lt;h2 id="custom-month" class="custom-month"&gt;&lt;/h2&gt;
  
          &lt;h3 id="custom-year" class="custom-year"&gt;&lt;/h3&gt;
        &lt;/div&gt;
  
        &lt;div id="calendar" class="fc-calendar-container"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Before </strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="{% static "js/jquery.calendario.js" %}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="{% static "js/data.js" %}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      jQuery(function() {
  
          var transEndEventNames = {
                  'WebkitTransition' : 'webkitTransitionEnd',
                  'MozTransition' : 'transitionend',
                  'OTransition' : 'oTransitionEnd',
                  'msTransition' : 'MSTransitionEnd',
                  'transition' : 'transitionend'
              },
              transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
              $wrapper = $( '#custom-inner' ),
              $calendar = $( '#calendar' ),
              cal = $calendar.calendario( {
                  onDayClick : function( $el, $contentEl, dateProperties ) {
  
                      if( $contentEl.length &gt; 0 ) {
                          showEvents( $contentEl, dateProperties );
                      }
  
                  },
                  caldata : codropsEvents,
                  displayWeekAbbr : true
              } ),
              $month = $( '#custom-month' ).html( cal.getMonthName() ),
              $year = $( '#custom-year' ).html( cal.getYear() );
  
          $( '#custom-next' ).on( 'click', function() {
              cal.gotoNextMonth( updateMonthYear );
          } );
          $( '#custom-prev' ).on( 'click', function() {
              cal.gotoPreviousMonth( updateMonthYear );
          } );
  
          function updateMonthYear() {
              $month.html( cal.getMonthName() );
              $year.html( cal.getYear() );
          }
  
          // just an example..
          function showEvents( $contentEl, dateProperties ) {
  
              hideEvents();
  
              var $events = $( '&lt;div id="custom-content-reveal" class="custom-content-reveal"&gt;&lt;h4&gt;Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '&lt;/h4&gt;&lt;/div&gt;' ),
                  $close = $( '&lt;span class="custom-content-close"&gt;&lt;/span&gt;' ).on( 'click', hideEvents );
  
              $events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
  
              setTimeout( function() {
                  $events.css( 'top', '0%' );
              }, 25 );
  
          }
          function hideEvents() {
  
              var $events = $( '#custom-content-reveal' );
              if( $events.length &gt; 0 ) {
  
                  $events.css( 'top', '100%' );
                  Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();
  
              }
  
          }
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Ps. It's a django project hence the <code>{% static "..." %}</code>.</p>