ng-calendar-heatmap

D3 calendar heatmap for angular

Usage no npm install needed!

<script type="module">
  import ngCalendarHeatmap from 'https://cdn.skypack.dev/ng-calendar-heatmap';
</script>

README

Node.js CI npm version License: MIT

ng calendar heatmap (live-demo)

Based on DKirwan/calendar-heatmap

Example

How to use

  1. Install npm i --save ng-calendar-heatmap

  2. Install dependencies npm i --save d3 moment

  3. Import module into app.module.ts:

...
import { CalendarHeatmapModule } from 'ng-calendar-heatmap';
...
@NgModule({
  ...
  imports: [
    BrowserModule,
    CalendarHeatmapModule
  ],
  ...
  1. Add calendar-heatmap component to your component:
<ng-calendar-heatmap [data]="calendarData" [options]="calendarOptions"></ng-calendar-heatmap>
  1. Bind data (currently it only renders, when data is available)

data structure

export interface CalendarData {
  date: Date;
  count: number;
}

export interface CalendarOptions {
  width?: number;
  height?: number;
  responsive?: boolean;
  legendWidth?: number;
  SQUARE_LENGTH?: number;
  SQUARE_PADDING?: number;
  MONTH_LABEL_PADDING?: number;
  DAY_WIDTH?: number;
  MONTH_LABEL_HEIGHT?: number;
  now?: Date;
  yearAgo?: Date;
  startDate?: Date;
  max?: number;
  staticMax?: boolean;
  colorRange?: any[];
  tooltipEnabled?: boolean;
  tooltipUnit?: any;
  legendEnabled?: boolean;
  onClick?: (data?: CalendarData) => void;
  weekStart?: CalendarWeekStart;
  locale?: CalendarLocale;
}

export enum CalendarWeekStart {
  SUNDAY = 0,
  MONDAY = 1
}

export interface CalendarLocale {
  months: string[];
  days: string[];
  no: string;
  on: string;
  less: string;
  more: string;
}

how to start development envoirement

  1. git clone git@github.com:fischer-matthias/ng-calendar-heatmap.git
  2. npm install
  3. ng build ng-calendar-heatmap --watch
  4. ng serve
  5. view results under http://localhost:4200