Skip to main content Link Menu Expand (external link) Document Search Copy Copied

itemSelector

Specify where the calendar should be rendered

itemSelector: Element | string;

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

Default: #cal-heatmap


Usage

Example with the default itemselector

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

Example with a custom itemselector

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

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