Multiple Calendars on same page with cal-heatmap plugin

问题

I have initialized multiple CalHeatMap objects on a single page:

....
{% 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 %}
    <div id="cal{{ forloop.counter }}"></div>
{% endfor %}
<div id="previousSelector-a" style="nullposition:relative;">
    <button class="btn" id="previousSelector-a-previous">Previous</button>
</div>

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?

http://jsfiddle.net/mbdtsmh/ncW59/1/

回答1:

Use the itemNamespace option, and assign a different namespace to each calendar instance.

来源：https://stackoverflow.com/questions/19911767/multiple-calendars-on-same-page-with-cal-heatmap-plugin