title: Multiple Calendars on same page with cal-heatmap plugin
body: <p>I have initialized multiple CalHeatMap objects on a single page:</p>
  
  <pre><code>....
  {% for row in queryset %}
      var cal{{ forloop.counter }} = new.CalHeatMap();
      cal{{ forloop.counter }}.init(
                {id:"cal{{ forloop.counter }}", itemSelector: "#previousSelector-a", previousSelector: "#previousSelector-a-previous", domain: 'day', subDomain:'hour', colLimit: 24, range: 4, displayLegend: false, domainLabelFormat: ""}
      );
  {% endfor %}
  
  
  ....
  {% for row in queryset %}
      &lt;div id="cal{{ forloop.counter }}"&gt;&lt;/div&gt;
  {% endfor %}
  &lt;div id="previousSelector-a" style="nullposition:relative;"&gt;
      &lt;button class="btn" id="previousSelector-a-previous"&gt;Previous&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but I want to be able to use the previous and next selectors so they when I click on them they will progress all calendars not just the last calendar as is the case now?</p>
  
  <p><a href="http://jsfiddle.net/mbdtsmh/ncW59/1/" rel="nofollow">http://jsfiddle.net/mbdtsmh/ncW59/1/</a></p>