Skip to main content

itemSelector

Specify where the calendar should be rendered

itemSelector: Element | string;

This option accepts either an Element, or any W3C Selector string, such as #my-id or .myclass.

Default: #cal-heatmap

Usage​

Example with the default itemSelector​

index.html
/* Insert the following element somewhere in your page at the place where you
want to insert the calendar */
<div id="cal-heatmap"></div>
index.js
const cal = new CalHeatmap();
cal.paint(); // itemSelector can be omitted when using the default selector

Example with a custom itemselector​

index.html
// Assuming you have the following element somewhere in your page
<div id="my-node"></div>
index.js
const cal = new CalHeatmap();
// These two following calls are identicals
cal.paint({ itemSelector: '#my-node' });
cal.paint({ itemSelector: document.getElementById('my-node') });
note

If the DOM node is not empty, the calendar will be inserted after the existing children.