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

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

Navigate the calendar to trigger the resize

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

Click on a subdomain

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

Hover a subdomain

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

Hover a subDomain

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

Try navigating back, until the min date is reached

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
});