Events

Listen for events emitted by the calendar

const cal = new CalHeatmap();
cal.on(eventName: string, (arguments: any): void => {
  // Do something with the arguments on event trigger
})
cal.paint();

Define your listeners before calling paint(), to make sure you’re catching events emitted by the paint() call.

List of events

resize

Event emitted when the calendar size has changed.

Arguments:

• newWidth
• newHeight
• oldWidth
• oldHeight

Usage Example

cal.on('resize', (newW, newH, oldW, oldH) => {
  console.log(
    `Calendar has been resized from ${oldW}x${oldH} to ${newW}x${newH}`
  );
});

Playground

You can also retrieve the current dimensions with the dimensions() method

fill

Event emitted after new data have been loaded and painted into the calendar.

Arguments: none

Usage Example

cal.on('fill', () => {
  console.log('New data have been loaded!');
});

click

Event emitted on a subDomain cell click

Arguments:

• PointerEvent object
• subDomain timestamp (in ms), rounded to the start of the subdomain
• Value (from your dataset) associated to this subdomain

Usage Example

cal.on('click', (event, timestamp, value) => {
  console.log(
    'On <b>' +
      new Date(timestamp).toLocaleDateString() +
      '</b>, the max temperature was ' +
      value +
      '°C'
  );
});

Playground

mouseover

Event emitted when the mouse enter a subDomain cell.

Arguments:

• PointerEvent object
• subDomain timestamp (in ms), rounded to the start of the subdomain
• Value (from your dataset) associated to this subdomain

Usage Example

cal.on('mouseover', (event, timestamp, value) => {
  console.log(
    'On <b>' +
      new Date(timestamp).toLocaleDateString() +
      '</b>, the max temperature was ' +
      value +
      '°C'
  );
});

Playground

mouseout

Event emitted when the mouse exit a subDomain cell.

Arguments:

• PointerEvent object
• subDomain timestamp (in ms), rounded to the start of the subdomain
• Value (from your dataset) associated to this subdomain

Usage example

cal.on('mouseout', (event, timestamp, value) => {
  console.log(
    'On <b>' +
      new Date(timestamp).toLocaleDateString() +
      '</b>, the max temperature was ' +
      value +
      '°C'
  );
});

Playground

minDateReached

Event emitted after a navigation event, and when the calendar has reached the min date, if set.

Arguments: none

Usage example

cal.on('minDateReached', () => {
  // Do something to disable the navigation PREVIOUS button
});

Playground

maxDateReached

Event emitted after a navigation event, and when the calendar has reached the max date, if set.

Arguments: none

Usage example

cal.on('maxDateReached', () => {
  // Do something to disable the navigation NEXT button
});

minDateNotReached

Event emitted after a navigation event, and when the calendar has not reached the min date, if set. Used to exit the calendar from the minDateReached status.

Arguments: none

Usage example

cal.on('minDateNotReached', () => {
  // Do something to enable back the PREVIOUS button,
  // after disabling it with the minDateReached event
});

maxDateNotReached

Event emitted after a navigation event, and when the calendar has not reached the max date, if set. Used to exit the calendar from the maxDateReached status.

Arguments: none

Usage example

cal.on('maxDateNotReached', () => {
  // Do something to enable back the NEXT button,
  // after disabling it with the maxDateReached event
});

destroy

Event emitted when calling destroy().

Arguments: none

Called at the start of the destroy process, use the promise returned by destroy if you want to wait for the destroy process to complete.

Usage example

cal.on('destroy', () => {
  // Calendar has started destroying
  // Do something
});