🚀 Usage

Use the following steps to use the Calendar Heatmap in your Vue project.

Import

Import NxCalendarHeatmap component in your app.

App.tsx

import React, { useState, useEffect, useCallback } from 'react';

import { NxCalendarHeatmap } from '@ngeenx/nx-react-calendar-heatmap';

...

import "@ngeenx/nx-calendar-heatmap-utils/styles.css";
import "tippy.js/dist/tippy.css";

const App: React.FC = (props: IAppProps) => {
  // ...

  const [options, setOptions] = useState({
    type: HeatMapCalendarType.YEARLY,
  });

  return (
    <>
      {/* ... */}

      <NxCalendarHeatmap
        options={options}
        data={heatmapData}
        footerContent={<HeatmapFooterHint />}
      />

      {/* ... */}
    </>
  );
};

Data Source

data property is an array of IHeatmapDay objects. Each object represents a day in the heatmap (dates must sort in ascending order).

Data Source

Data must be provided by the parent component. There is no internal API call to fetch the data or date ordering features. In this case provided data must cover the selected calendar type and day order.

App.tsx

import React, { useState, useEffect, useCallback } from 'react';

// calendar libs
import { NxCalendarHeatmap } from '@ngeenx/nx-react-calendar-heatmap';
import {
  IHeatmapDay,
  HeatMapCalendarType,
  ICalendarHeatmapOptions,
  IHeatmapColor,
  HeatmapLevelsDirection,
} from '@ngeenx/nx-calendar-heatmap-utils';

// third party
import { DateTime } from "luxon";

// styles
import "@ngeenx/nx-calendar-heatmap-utils/styles.css";
import "tippy.js/dist/tippy.css";

const App: React.FC = (props: IAppProps) => {
  // ...

  const [startDate, setStartDate] = useState<DateTime>(
    DateTime.now().startOf('year')
  );

  const [options, setOptions] = useState({
    type: HeatMapCalendarType.YEARLY,
    startDate
  });

  return (
    <>
      {/* ... */}

      <NxCalendarHeatmap
        options={options}
        data={heatmapData}
        footerContent={<HeatmapFooterHint />}
      />

      {/* ... */}
    </>
  );
};

note

generateHeatmapData is a helper function to generate random data for the heatmap. You can replace this function with your own data source.