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

Quick start

After installing the script:

  • insert <div id="cal-heatmap"></div> where you want to render the calendar in your page
  • create a calendar instance
  • paint the calendar with your desired options/plugins.

Example calendar with no set options

const cal = new CalHeatmap();
cal.paint();

Example calendar with custom options

const cal = new CalHeatmap();
cal.paint({
  date: { start: new Date(2020, 0, 15) },
  domain: { type: 'month' },
  subDomain: { type: 'day' },
});

You can customize the calendar by passing an Options object and/or a Plugins list to paint().

See the Examples section for more examples.