### Basic Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/api-reference-calendar-heatmap.md

Demonstrates how to render a basic calendar heatmap with specified start and end dates and sample data.

```javascript
import React from 'react';
import CalendarHeatmap from 'react-calendar-heatmap';
import 'react-calendar-heatmap/dist/styles.css';

function MyComponent() {
  return (
    <CalendarHeatmap
      startDate={new Date('2016-01-01')}
      endDate={new Date('2016-04-01')}
      values={[
        { date: '2016-01-01', count: 12 },
        { date: '2016-01-22', count: 122 },
        { date: '2016-01-30', count: 38 },
      ]}
    />
  );
}
```

--------------------------------

### Install react-calendar-heatmap

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/README.md

Install the library using npm.

```bash
npm install react-calendar-heatmap
```

--------------------------------

### Install React Calendar Heatmap

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/README.md

Install the npm module using yarn or npm.

```bash
yarn add react-calendar-heatmap
```

--------------------------------

### Get Beginning Time for Date Utility

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Shows how to use `getBeginningTimeForDate` to normalize a date to the start of its day (midnight). This is helpful for consistent date comparisons.

```javascript
import { getBeginningTimeForDate } from 'react-calendar-heatmap';

const date = new Date('2023-10-26T14:30:00Z');
const beginningOfDay = getBeginningTimeForDate(date);
console.log(beginningOfDay); // Output: 2023-10-26T00:00:00.000Z
```

--------------------------------

### GitHub Style Heatmap Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

A configuration example that mimics the visual style of GitHub's contribution graph. This typically involves specific color scales and data formatting.

```javascript
import CalendarHeatmap from 'react-calendar-heatmap';
import React from 'react';

function GitHubStyleHeatmap() {
  const today = new Date();
  const oneYearAgo = new Date(today);
  oneYearAgo.setFullYear(today.getFullYear() - 1);

  const values = [
    // Data formatted to match GitHub's contribution counts
    { date: '2023-01-01', count: 0 },
    { date: '2023-01-02', count: 1 },
    { date: '2023-01-03', count: 2 },
    { date: '2023-01-04', count: 3 },
    { date: '2023-01-05', count: 4 },
  ];

  // GitHub-like color classes (assuming corresponding CSS is defined)
  const gitHubClassForValue = (value) => {
    if (!value) {
      return 'color-github-empty';
    }
    return `color-github-${value.count}`;
  };

  return (
    <CalendarHeatmap
      startDate={oneYearAgo}
      endDate={today}
      values={values}
      classForValue={gitHubClassForValue}
      // ... other props for spacing, tooltips etc.
    />
  );
}
```

--------------------------------

### onClick Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Handle click events on calendar squares. This example logs the clicked date and count to the console and opens a detail modal.

```javascript
onClick={(value) => {
  if (value) {
    console.log(`Clicked ${value.date} with count ${value.count}`);
    this.openDetailModal(value);
  }
}}
```

--------------------------------

### Tooltip Integration Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Shows how to use the `tooltipDataAttrs` prop to dynamically generate attributes for tooltips, providing additional information when a user hovers over a day.

```javascript
import CalendarHeatmap from 'react-calendar-heatmap';
import React from 'react';

function TooltipHeatmap() {
  const values = [
    { date: '2023-01-01', count: 1, message: 'First commit' },
    { date: '2023-01-02', count: 2, message: 'Second commit' },
  ];

  const tooltipAttrs = (value) => {
    if (!value) {
      return null;
    }
    return {
      'data-tooltip': `${value.date}: ${value.message} (${value.count} contributions)`,
      'data-tooltip-class': 'my-custom-tooltip',
    };
  };

  return (
    <CalendarHeatmap
      values={values}
      tooltipDataAttrs={tooltipAttrs}
      // ... other props
    />
  );
}
```

--------------------------------

### onMouseOver Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Handle mouseover events on calendar squares. This example logs a message to the console if the activity count is high.

```javascript
onMouseOver={(event, value) => {
  if (value && value.count > 100) {
    console.log(`High activity on ${value.date}`);
  }
}}
```

--------------------------------

### onMouseLeave Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Handle mouseleave events on calendar squares. This example calls a function to hide a popover.

```javascript
onMouseLeave={(event, value) => {
  this.hidePopover();
}}
```

--------------------------------

### Calculate Start Date - JavaScript

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

Calculates the start date by shifting backward from the end date by the number of days in the range. Includes +1 for inclusive endDate.

```javascript
getStartDate() {
  return shiftDate(this.getEndDate(), -this.getDateDifferenceInDays() + 1);
}
```

--------------------------------

### Develop React Calendar Heatmap Locally

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/demo/README.md

Link the local react-calendar-heatmap package and start the demo site for development. Changes in the heatmap package will reflect in the demo.

```bash
yarn link
yarn start
```

```bash
yarn link react-calendar-heatmap
yarn start
```

--------------------------------

### Advanced transformDayElement Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

This advanced example demonstrates adding a custom double-click event handler and a data-tooltip attribute to the SVG rect element.

```javascript
transformDayElement={(element, value, index) => {
  const handler = value ? () => this.showDetail(value) : null;
  return React.cloneElement(element, {
    onDoubleClick: handler,
    'data-tooltip': value ? `Details for ${value.date}` : '',
  });
}}
```

--------------------------------

### Dark Mode Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Provides an example of how to style the heatmap for dark mode. This typically involves overriding default CSS variables or classes to use darker backgrounds and lighter text.

```css
/* Default styles (light mode) */
.react-calendar-heatmap {
  --color-text: #333;
  --color-background: #fff;
  /* ... other light mode variables */
}

/* Dark mode overrides */
body.dark-mode .react-calendar-heatmap {
  --color-text: #eee;
  --color-background: #222;
  /* Define specific color scale overrides for dark mode */
  --color-scale-1: #1a472a; /* Example dark green */
  --color-scale-2: #26653a;
  --color-scale-3: #408a4f;
  --color-scale-4: #9be9a8;
}

/* Ensure your color scale classes use these variables */
.color-scale-1 {
  fill: var(--color-scale-1);
}
/* ... other color scales */
```

--------------------------------

### Custom Color Scale Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

An example of how to define and apply a custom color scale to the heatmap using the `classForValue` prop. This allows for tailored visual representations of data.

```javascript
import CalendarHeatmap from 'react-calendar-heatmap';
import React from 'react';

function CustomColorHeatmap() {
  const values = [
    { date: '2023-01-01', count: 1 },
    { date: '2023-01-02', count: 5 },
    { date: '2023-01-03', count: 10 },
    { date: '2023-01-04', count: 15 },
  ];

  const customClassForValue = (value) => {
    if (!value) {
      return 'color-empty';
    }
    if (value.count < 3) {
      return 'color-low';
    } else if (value.count < 10) {
      return 'color-medium';
    } else {
      return 'color-high';
    }
  };

  return (
    <CalendarHeatmap
      values={values}
      classForValue={customClassForValue}
      // ... other props
    />
  );
}
```

--------------------------------

### Get Range Utility Function

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Shows how to use `getRange` to generate an array of dates within a specified start and end date, inclusive. Useful for creating date sequences.

```javascript
import { getRange } from 'react-calendar-heatmap';

const startDate = new Date('2023-10-20');
const endDate = new Date('2023-10-25');
const dateRange = getRange(startDate, endDate);
console.log(dateRange); // Array of Date objects from Oct 20 to Oct 25, 2023
```

--------------------------------

### Localization Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Shows how to adapt the heatmap for different languages by customizing the month and day labels. This involves providing translated arrays to the component props.

```javascript
import CalendarHeatmap from 'react-calendar-heatmap';
import React from 'react';

function LocalizedHeatmap() {
  const values = [
    { date: '2023-01-01', count: 1 },
  ];

  const spanishMonthLabels = [
    'Ene',
    'Feb',
    'Mar',
    'Abr',
    'May',
    'Jun',
    'Jul',
    'Ago',
    'Sep',
    'Oct',
    'Nov',
    'Dic',
  ];

  const spanishDayLabels = [
    'Do',
    'Lu',
    'Ma',
    'Mi',
    'Ju',
    'Vi',
    'Sá',
  ];

  return (
    <CalendarHeatmap
      values={values}
      monthLabels={spanishMonthLabels}
      dayLabels={spanishDayLabels}
      // ... other props
    />
  );
}
```

--------------------------------

### Event Handling Example (onClick)

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Demonstrates how to attach an `onClick` event handler to the heatmap to respond to user interactions with individual days. This allows for dynamic behavior based on clicks.

```javascript
import CalendarHeatmap from 'react-calendar-heatmap';
import React from 'react';

function EventHeatmap() {
  const values = [
    { date: '2023-01-01', count: 1 },
    { date: '2023-01-02', count: 2 },
  ];

  const handleClick = (value, event) => {
    if (value) {
      alert(`Clicked on ${value.date} with count: ${value.count}`);
    }
  };

  return (
    <CalendarHeatmap
      values={values}
      onClick={handleClick}
      // ... other props
    />
  );
}
```

--------------------------------

### Basic Calendar Heatmap Usage

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

A basic example demonstrating how to render a CalendarHeatmap component with minimal configuration. Ensure you have the necessary data formatted as ValueObjects.

```javascript
import CalendarHeatmap from 'react-calendar-heatmap';
import React from 'react';

function MyComponent() {
  const today = new Date();
  const oneYearAgo = new Date(today);
  oneYearAgo.setFullYear(today.getFullYear() - 1);

  const values = [
    { date: '2023-01-01', count: 10 },
    { date: '2023-01-02', count: 20 },
    // ... more values
  ];

  return (
    <CalendarHeatmap
      startDate={oneYearAgo}
      endDate={today}
      values={values}
      classForValue={(value) => {
        if (!value) {
          return 'color-empty';
        }
        return `color-scale-${value.count}`;
      }}
      tooltipDataAttrs={(value) => {
        if (!value || value.count === null) {
          return null;
        }
        return {
          'data-tooltip': `${value.date}: ${value.count} commits`,
        };
      }}
    />
  );
}
```

--------------------------------

### Responsive Design Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Illustrates techniques for making the heatmap responsive to different screen sizes. This often involves CSS media queries and potentially adjusting SVG dimensions.

```css
.react-calendar-heatmap {
  width: 100%;
  height: auto; /* Adjust height automatically */
}

.react-calendar-heatmap svg {
  width: 100%;
  height: auto;
}

/* Example media query for smaller screens */
@media (max-width: 600px) {
  .react-calendar-heatmap {
    font-size: 0.8em; /* Reduce font size on smaller screens */
  }
  /* Potentially adjust spacing or number of days shown */
}
```

--------------------------------

### Custom Colors Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Demonstrates how to implement custom color scales beyond the predefined ones, allowing for unique visual themes. This involves defining your own CSS classes and mapping values to them.

```javascript
import CalendarHeatmap from 'react-calendar-heatmap';
import React from 'react';

function CustomThemeHeatmap() {
  const values = [
    { date: '2023-01-01', intensity: 1 },
    { date: '2023-01-02', intensity: 3 },
    { date: '2023-01-03', intensity: 7 },
  ];

  const customThemeClass = (value) => {
    if (!value) {
      return 'color-theme-empty';
    }
    if (value.intensity < 3) {
      return 'color-theme-low';
    } else if (value.intensity < 7) {
      return 'color-theme-medium';
    } else {
      return 'color-theme-high';
    }
  };

  return (
    <CalendarHeatmap
      values={values}
      classForValue={customThemeClass}
      // Ensure CSS for 'color-theme-low', 'color-theme-medium', 'color-theme-high' is defined
    />
  );
}
```

--------------------------------

### Print Styles Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Shows how to define CSS rules for printing the heatmap. This often involves simplifying the display, removing interactive elements, and ensuring readability on paper.

```css
@media print {
  .react-calendar-heatmap {
    /* Remove shadows, borders, or other print-unfriendly styles */
    box-shadow: none;
    border: none;
    background-color: transparent;
  }

  .react-calendar-heatmap .react-calendar-heatmap-tooltip {
    display: none; /* Hide tooltips when printing */
  }

  /* Ensure colors are visible on print media */
  .color-scale-1 { fill: #e0e0e0; } /* Light gray */
  .color-scale-2 { fill: #b0b0b0; } /* Medium gray */
  .color-scale-3 { fill: #707070; } /* Dark gray */
  .color-scale-4 { fill: #303030; } /* Very dark gray */
  .color-empty { fill: #f0f0f0; } /* Very light gray for empty */
}
```

--------------------------------

### ValueObject Example Objects

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Illustrates different ways to represent a `ValueObject`, including using ISO date strings, Unix timestamps, and JavaScript Date objects. Custom properties like `count`, `id`, and `description` can be added.

```javascript
{ date: '2016-01-01', count: 12 }
```

```javascript
{ date: 1452816000000, count: 5, id: 'event-123' }
```

```javascript
{ date: new Date('2016-01-01'), count: 0, description: 'Low activity' }
```

--------------------------------

### 3rd-party Tooltip Integration (Popper.js/Tooltip.js)

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/configuration.md

Integrate with external tooltip libraries like react-tooltip by providing data attributes. Requires a corresponding tooltip component setup.

```jsx
<CalendarHeatmap
  values={data}
  tooltipDataAttrs={(value) => ({
    'data-tooltip-id': 'heatmap-tooltip',
    'data-tooltip-content': value ? `${value.count} items` : 'No data',
    'data-tooltip-place': 'top',
  })}
/>
```

```jsx
import { Tooltip } from 'react-tooltip';

function MyComponent() {
  return (
    <>
      <CalendarHeatmap
        values={data}
        tooltipDataAttrs={(value) => ({
          'data-tooltip-id': 'heatmap-tooltip',
          'data-tooltip-content': value ? `${value.count}` : 'No data',
        })}
      />
      <Tooltip id="heatmap-tooltip" />
    </>
  );
}
```

--------------------------------

### Basic Setup with Custom Date Range

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/configuration.md

Configure the heatmap to display a specific date range, such as an entire year. Uses default horizontal layout and styling.

```jsx
<CalendarHeatmap
  startDate={new Date('2023-01-01')}
  endDate={new Date('2023-12-31')}
  values={yearlyData}
/>
```

--------------------------------

### GitHub Color Scale Usage

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/styling-guide.md

Example of implementing the GitHub color scale by defining a `classForValue` function that maps data counts to specific GitHub color classes.

```javascript
<CalendarHeatmap
  values={data}
  classForValue={(value) => {
    if (!value) return 'color-github-0';
    if (value.count < 10) return 'color-github-1';
    if (value.count < 20) return 'color-github-2';
    if (value.count < 30) return 'color-github-3';
    return 'color-github-4';
  }}
/>
```

--------------------------------

### Calculate Empty Days at Start - JavaScript

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

Calculates the number of empty days preceding the first day of the range, based on the day of the week. These are typically not rendered unless showOutOfRangeDays is true.

```javascript
getNumEmptyDaysAtStart() {
  return this.getStartDate().getDay();
}
```

--------------------------------

### Transform Day Element Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Illustrates using the `transformDayElement` prop to customize the SVG elements representing each day. This allows for advanced styling or adding custom elements.

```javascript
import CalendarHeatmap from 'react-calendar-heatmap';
import React from 'react';

function TransformDayHeatmap() {
  const values = [
    { date: '2023-01-01', count: 1 },
  ];

  const transformDay = (rect, value) => {
    // Example: Add a custom class or attribute to the rect element
    if (value && value.count > 0) {
      rect.setAttribute('class', 'highlighted-day');
    }
    return rect;
  };

  return (
    <CalendarHeatmap
      values={values}
      transformDayElement={transformDay}
      // ... other props
    />
  );
}
```

--------------------------------

### Default Color Scale Usage

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/styling-guide.md

Example of how to use the default color scale by setting the `classForValue` prop. This function maps values to CSS classes for styling.

```javascript
classForValue: (value) => (value ? 'color-filled' : 'color-empty')
```

--------------------------------

### GitLab Color Scale Usage

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/styling-guide.md

Example of applying the GitLab color scale by creating a `classForValue` function that assigns GitLab color classes based on the `count` property of the data values.

```javascript
<CalendarHeatmap
  values={data}
  classForValue={(value) => {
    if (!value) return 'color-gitlab-0';
    if (value.count < 10) return 'color-gitlab-1';
    if (value.count < 20) return 'color-gitlab-2';
    if (value.count < 30) return 'color-gitlab-3';
    return 'color-gitlab-4';
  }}
/>
```

--------------------------------

### Basic Calendar Heatmap Usage

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/README.md

Render a basic heatmap component with specified start and end dates, and an array of values. Ensure values have a 'date' and 'count' property.

```jsx
<CalendarHeatmap
  startDate={new Date('2016-01-01')}
  endDate={new Date('2016-04-01')}
  values={[
    { date: '2016-01-01', count: 12 },
    { date: '2016-01-22', count: 122 },
    { date: '2016-01-30', count: 38 },
    // ...and so on
  ]}
/>
```

--------------------------------

### Custom titleForValue Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Generate custom browser tooltips (title attribute) for calendar squares, displaying the date and contribution count. This is useful for providing quick information on hover.

```javascript
titleForValue={(value) => {
  if (!value) return 'No data';
  return `${value.date}: ${value.count} contributions`;
}}
```

--------------------------------

### Import and Use Date/Label Constants

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/constants-reference.md

Import constants for date calculations and default labels. Use MILLISECONDS_IN_ONE_DAY for time conversions, DAYS_IN_WEEK for grid logic, and MONTH_LABELS/DAY_LABELS for text.

```javascript
import {
  DAYS_IN_WEEK,
  MILLISECONDS_IN_ONE_DAY,
  MONTH_LABELS,
  DAY_LABELS,
} from 'react-calendar-heatmap/src/constants';

// Calculate days between two dates
const daysBetween = (d1, d2) => {
  const ms = Math.abs(d2 - d1);
  return Math.ceil(ms / MILLISECONDS_IN_ONE_DAY);
};

// Get month name for a date
const monthName = (date) => MONTH_LABELS[date.getMonth()];

// Iterate week days
for (let i = 0; i < DAYS_IN_WEEK; i++) {
  console.log(DAY_LABELS[i]);
}
```

--------------------------------

### Deploy React Calendar Heatmap Demo Site

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/demo/README.md

Deploy new updates of the react-calendar-heatmap demo site to GitHub Pages.

```bash
yarn run deploy
```

--------------------------------

### getRange()

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/helpers-reference.md

Generates an array of sequential integers starting from 0 up to (but not including) a specified count.

```APIDOC
## getRange(count: number): Array<number>

### Description
Generates an array of integers from 0 to count-1.

### Parameters
#### Path Parameters
- **count** (number) - Required - Length of the array to generate.

### Returns
`Array<number>` - array [0, 1, 2, ..., count-1]

### Example
```javascript
import { getRange } from 'react-calendar-heatmap/src/helpers';

const weeks = getRange(52);
console.log(weeks); // [0, 1, 2, ..., 51]

const days = getRange(7);
console.log(days); // [0, 1, 2, 3, 4, 5, 6]
```

**Internal Usage**: Used in the CalendarHeatmap component to iterate weeks and days when rendering:

```javascript
// Inside component render logic:
getRange(this.getWeekCount()).map((weekIndex) => this.renderWeek(weekIndex))
getRange(DAYS_IN_WEEK).map((dayIndex) => this.renderSquare(dayIndex, ...))
```
```

--------------------------------

### Localized Labels (Spanish)

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/configuration.md

Customize month and weekday labels for internationalization. Provides Spanish labels as an example.

```jsx
<CalendarHeatmap
  values={data}
  monthLabels={[
    'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
    'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic',
  ]}
  weekdayLabels={[
    'Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sab',
  ]}
/>
```

--------------------------------

### Default classForValue Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

This is the default function for determining the CSS class name for a calendar square based on whether it has data.

```javascript
(value) => (value ? 'color-filled' : 'color-empty')
```

--------------------------------

### Generate Range Array

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/helpers-reference.md

Generates an array of integers starting from 0 up to (but not including) the specified count. Useful for iterating over weeks or days.

```javascript
import { getRange } from 'react-calendar-heatmap/src/helpers';

const weeks = getRange(52);
console.log(weeks); // [0, 1, 2, ..., 51]

const days = getRange(7);
console.log(days); // [0, 1, 2, 3, 4, 5, 6]
```

--------------------------------

### SVG Rect Element with Tooltip Attributes

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Example of an SVG rect element with data attributes that can be used by tooltip libraries like Popper.js.

```html
<rect
  class="color-filled"
  data-toggle="tooltip"
  data-placement="top"
  title="10 contributions"
  ...
/>
```

--------------------------------

### Compact Layout Configuration

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/configuration.md

Create a dense heatmap by disabling spacing and labels. Ideal for space-constrained interfaces where minimal visual clutter is desired.

```jsx
<CalendarHeatmap
  values={data}
  gutterSize={0}
  showMonthLabels={false}
  showWeekdayLabels={false}
/>
```

--------------------------------

### Common transformDayElement Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Use React.cloneElement to add custom data attributes and aria-label to the SVG rect element for each day. This is useful for accessibility and custom styling.

```javascript
transformDayElement={(element, value, index) => {
  return React.cloneElement(element, {
    'data-custom-id': value ? value.id : null,
    'data-index': index,
    'aria-label': value ? `${value.count} items on ${value.date}` : 'No data',
  });
}}
```

--------------------------------

### Import Calendar Heatmap Styles

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/README.md

Import the component's styles. This requires a CSS loader. Alternatively, copy the stylesheet into your project.

```javascript
import 'react-calendar-heatmap/dist/styles.css';
```

--------------------------------

### renderWeek()

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

Renders a <g> group containing 7 squares, representing one day of the week. It applies a transform and class name.

```APIDOC
## renderWeek(weekIndex)

### Description
Renders a `<g>` group containing 7 squares (one per day of the week).

### Signature
`(weekIndex) => React.ReactElement`

### Parameters
- `weekIndex` (number) - The index of the week to render.

### Code Example
```javascript
renderWeek(weekIndex) {
  return (
    <g
      key={weekIndex}
      transform={this.getTransformForWeek(weekIndex)}
      className={`${CSS_PSEDUO_NAMESPACE}week`}>
      {getRange(DAYS_IN_WEEK).map((dayIndex) =>
        this.renderSquare(dayIndex, weekIndex * DAYS_IN_WEEK + dayIndex),
      )}
    </g>
  );
}
```
```

--------------------------------

### Interactive with Custom Tooltips and Click Handler

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/configuration.md

Implement custom tooltips and click event handling for interactive data exploration. Logs clicked date and shows a modal.

```jsx
<CalendarHeatmap
  values={data}
  titleForValue={(value) => {
    if (!value) return 'No data';
    return `${value.date}: ${value.count} contributions`;
  }}
  onClick={(value) => {
    if (value) {
      console.log(`Clicked ${value.date}`);
      showModal(value);
    }
  }}
  onMouseOver={(event, value) => {
    if (value) {
      highlightRow(value.date);
    }
  }}
  onMouseLeave={(event, value) => {
    clearHighlight();
  }}
/>
```

--------------------------------

### Custom Color Scale

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/api-reference-calendar-heatmap.md

Shows how to apply custom CSS classes to day elements based on their values, creating a GitHub-style color scale.

```javascript
<CalendarHeatmap
  startDate={new Date('2016-01-01')}
  endDate={new Date('2016-12-31')}
  values={data}
  classForValue={(value) => {
    if (!value) {
      return 'color-empty';
    }
    if (value.count < 10) return 'color-github-1';
    if (value.count < 20) return 'color-github-2';
    if (value.count < 30) return 'color-github-3';
    return 'color-github-4';
  }}
/>
```

--------------------------------

### getBeginningTimeForDate()

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/helpers-reference.md

Normalizes a Date object to the beginning of the day (midnight, 00:00:00), effectively removing the time component.

```APIDOC
## getBeginningTimeForDate(date: Date): Date

### Description
Returns a new Date object set to 00:00:00 (midnight) for the given date, removing any time component.

### Parameters
#### Path Parameters
- **date** (Date) - Required - The date to normalize.

### Returns
`Date` - new Date at midnight (00:00:00) of the same calendar date

### Example
```javascript
import { getBeginningTimeForDate } from 'react-calendar-heatmap/src/helpers';

const dateWithTime = new Date('2016-01-15T14:30:45Z');
const midnight = getBeginningTimeForDate(dateWithTime);

console.log(midnight); // 2016-01-15T00:00:00
```
```

--------------------------------

### Custom classForValue Example

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Customize the CSS class names for calendar squares based on the 'count' property of the value object. This allows for different visual representations of activity levels.

```javascript
classForValue={(value) => {
  if (!value) return 'color-empty';
  if (value.count === 0) return 'color-zero';
  if (value.count < 10) return 'color-low';
  if (value.count < 50) return 'color-medium';
  return 'color-high';
}}
```

--------------------------------

### GitHub-style Color Scale Configuration

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/configuration.md

Customize the color scale to mimic GitHub's contribution graph. Requires corresponding CSS definitions for the color classes.

```jsx
<CalendarHeatmap
  values={contributionData}
  classForValue={(value) => {
    if (!value) return 'color-github-0';
    if (value.count < 10) return 'color-github-1';
    if (value.count < 20) return 'color-github-2';
    if (value.count < 30) return 'color-github-3';
    return 'color-github-4';
  }}
/>
```

```css
.react-calendar-heatmap .color-github-0 { fill: #eeeeee; }
.react-calendar-heatmap .color-github-1 { fill: #d6e685; }
.react-calendar-heatmap .color-github-2 { fill: #8cc665; }
.react-calendar-heatmap .color-github-3 { fill: #44a340; }
.react-calendar-heatmap .color-github-4 { fill: #1e6823; }
```

--------------------------------

### Main Render Method

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

The primary render method that updates the value cache and returns the complete SVG tree for the calendar. It includes groups for month labels, all weeks, and weekday labels.

```javascript
render() {
  this.valueCache = this.getValueCache(this.props);

  return (
    <svg className="react-calendar-heatmap" viewBox={this.getViewBox()}>
      <g transform={this.getTransformForMonthLabels()} /* ... */ >
        {this.renderMonthLabels()}
      </g>
      <g transform={this.getTransformForAllWeeks()} /* ... */ >
        {this.renderAllWeeks()}
      </g>
      <g transform={this.getTransformForWeekdayLabels()} /* ... */ >
        {this.renderWeekdayLabels()}
      </g>
    </svg>
  );
}
```

--------------------------------

### Get Beginning of Day for a Date

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/helpers-reference.md

Returns a new Date object set to midnight (00:00:00) for a given date, effectively removing the time component. Useful for date comparisons.

```javascript
import { getBeginningTimeForDate } from 'react-calendar-heatmap/src/helpers';

const dateWithTime = new Date('2016-01-15T14:30:45Z');
const midnight = getBeginningTimeForDate(dateWithTime);

console.log(midnight); // 2016-01-15T00:00:00
```

--------------------------------

### renderMonthLabels() / renderWeekdayLabels()

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

Renders the month labels and weekday labels. These methods return null if their corresponding show*Labels prop is false.

```APIDOC
## renderMonthLabels() / renderWeekdayLabels()

### Description
Render month and weekday label groups. Return `null` if the corresponding `show*Labels` prop is false.

### Signature
`() => Array<React.ReactElement> | null`
```

--------------------------------

### Define CSS Classes for Heatmap Colors

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/README.md

Define CSS rules to style the classes generated by the `classForValue` function. This example shows how to set fill colors for different count values.

```css
.react-calendar-heatmap .color-scale-1 { fill: #d6e685; }
.react-calendar-heatmap .color-scale-2 { fill: #8cc665; }
.react-calendar-heatmap .color-scale-3 { fill: #44a340; }
.react-calendar-heatmap .color-scale-4 { fill: #1e6823; }
```

--------------------------------

### Upgrade React Calendar Heatmap Version in Demo

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/demo/README.md

Upgrade the version of react-calendar-heatmap used in the demo site to a local version.

```bash
yarn upgrade react-calendar-heatmap@../
```

--------------------------------

### renderAllWeeks()

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

Renders all the weeks in the calendar by mapping over the total week count and calling renderWeek for each.

```APIDOC
## renderAllWeeks()

### Description
Renders all weeks by mapping over the week count.

### Signature
`() => Array<React.ReactElement>`

### Code Example
```javascript
renderAllWeeks() {
  return getRange(this.getWeekCount()).map((weekIndex) => this.renderWeek(weekIndex));
}
```
```

--------------------------------

### Usage of Value Cache in Render

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

Demonstrates how to initialize the value cache within the component's render method. The cached data is then available for use in other methods.

```javascript
render() {
  this.valueCache = this.getValueCache(this.props);
  // ... use this.valueCache in other methods
}
```

--------------------------------

### Import Internal Helper Functions

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/README.md

Import helper functions from the internal 'src/helpers' module. Note: These are not part of the public API and may change.

```javascript
// Helper functions
import {
  shiftDate,
  getBeginningTimeForDate,
  convertToDate,
  dateNDaysAgo,
  getRange,
} from 'react-calendar-heatmap/src/helpers';
```

--------------------------------

### Importing Default Styles and Custom Overrides

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/styling-guide.md

Import the default stylesheet and then include your custom CSS file for overrides. This approach allows you to leverage the default styles while selectively modifying them.

```javascript
import 'react-calendar-heatmap/dist/styles.css';
import './my-calendar-styles.css'; // Custom overrides
```

--------------------------------

### Calendar Heatmap with Custom Tooltip Library Integration

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/api-reference-calendar-heatmap.md

Integrates with external tooltip libraries by providing data attributes via the `tooltipDataAttrs` prop. This allows libraries like Popper.js or Tooltip.js to attach their own tooltips.

```javascript
<CalendarHeatmap
  values={data}
  tooltipDataAttrs={(value) => {
    return {
      'data-tooltip-id': 'heatmap-tooltip',
      'data-tooltip-content': value ? `${value.count} items` : 'No data',
    };
  }}
/>
```

--------------------------------

### Render All Weeks

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

Renders all weeks of the calendar by mapping over the total week count and calling `renderWeek` for each week index.

```javascript
renderAllWeeks() {
  return getRange(this.getWeekCount()).map((weekIndex) => this.renderWeek(weekIndex));
}
```

--------------------------------

### Responsive Design with CSS Media Queries

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/styling-guide.md

Apply responsive styles to the calendar container and its text elements using CSS media queries. This ensures the heatmap adapts to different screen sizes.

```css
.calendar-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .calendar-container {
    max-width: 100%;
  }
  
  .react-calendar-heatmap text {
    font-size: 8px;
  }
}
```

--------------------------------

### Convert to Date Utility Function

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/DOCUMENTATION_INDEX.txt

Illustrates the `convertToDate` function, which parses various date input formats (strings, numbers, Date objects) into standard JavaScript Date objects.

```javascript
import { convertToDate } from 'react-calendar-heatmap';

const dateString = '2023-10-26';
const dateFromNumber = 1698364800000; // Unix timestamp for 2023-10-26
const existingDate = new Date('2023-10-26T10:00:00Z');

console.log(convertToDate(dateString));
console.log(convertToDate(dateFromNumber));
console.log(convertToDate(existingDate));
```

--------------------------------

### render()

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

The main render method that orchestrates the rendering of the entire calendar heatmap. It updates the value cache and returns the SVG tree.

```APIDOC
## render()

### Description
Main render method. Updates `valueCache`, then returns the SVG tree.

### Signature
`() => React.ReactElement`

### Code Example
```javascript
render() {
  this.valueCache = this.getValueCache(this.props);

  return (
    <svg className="react-calendar-heatmap" viewBox={this.getViewBox()}>
      <g transform={this.getTransformForMonthLabels()} /* ... */ >
        {this.renderMonthLabels()}
      </g>
      <g transform={this.getTransformForAllWeeks()} /* ... */ >
        {this.renderAllWeeks()}
      </g>
      <g transform={this.getTransformForWeekdayLabels()} /* ... */ >
        {this.renderWeekdayLabels()}
      </g>
    </svg>
  );
}
```
```

--------------------------------

### Custom Color Scale for Calendar Heatmap

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/api-reference-calendar-heatmap.md

Applies custom CSS classes to day elements based on their value count, mimicking GitHub's color scheme. Requires corresponding CSS definitions.

```javascript
<CalendarHeatmap
  startDate={new Date('2016-01-01')}
  endDate={new Date('2016-12-31')}
  values={data}
  classForValue={(value) => {
    if (!value) {
      return 'color-empty';
    }
    if (value.count < 10) return 'color-github-1';
    if (value.count < 20) return 'color-github-2';
    if (value.count < 30) return 'color-github-3';
    return 'color-github-4';
  }}
/>
```

```css
.react-calendar-heatmap .color-empty { fill: #eeeeee; }
.react-calendar-heatmap .color-github-1 { fill: #d6e685; }
.react-calendar-heatmap .color-github-2 { fill: #8cc665; }
.react-calendar-heatmap .color-github-3 { fill: #44a340; }
.react-calendar-heatmap .color-github-4 { fill: #1e6823; }
```

--------------------------------

### Basic Calendar Heatmap Usage

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/README.md

Render a basic calendar heatmap with custom data and value styling. Ensure 'react-calendar-heatmap/dist/styles.css' is imported for default styling.

```javascript
import React from 'react';
import CalendarHeatmap from 'react-calendar-heatmap';
import 'react-calendar-heatmap/dist/styles.css';

export default function MyHeatmap() {
  const data = [
    { date: '2024-01-01', count: 12 },
    { date: '2024-01-02', count: 8 },
    { date: '2024-01-03', count: 0 },
    // ... more data
  ];

  return (
    <CalendarHeatmap
      startDate={new Date('2024-01-01')}
      endDate={new Date('2024-12-31')}
      values={data}
      classForValue={(value) => {
        if (!value) return 'color-empty';
        if (value.count < 10) return 'color-github-1';
        if (value.count < 20) return 'color-github-2';
        if (value.count < 30) return 'color-github-3';
        return 'color-github-4';
      }}
    />
  );
}
```

--------------------------------

### Calendar Heatmap with Static Tooltip Attributes

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/types.md

Applies static data attributes to all squares for tooltip integration. Keys become HTML/SVG attributes.

```javascript
<CalendarHeatmap
  tooltipDataAttrs={{ 'data-toggle': 'tooltip' }}
/>
```

--------------------------------

### Import Internal Constants

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/README.md

Import constants from the internal 'src/constants' module. Note: These are not part of the public API and may change.

```javascript
// Constants
import {
  MILLISECONDS_IN_ONE_DAY,
  DAYS_IN_WEEK,
  MONTH_LABELS,
  DAY_LABELS,
} from 'react-calendar-heatmap/src/constants';
```

--------------------------------

### Render a Single Week

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/rendering-internals.md

Renders a `<g>` group containing 7 squares for each day of the week. It applies a transform based on the week index and assigns a class name.

```javascript
renderWeek(weekIndex) {
  return (
    <g
      key={weekIndex}
      transform={this.getTransformForWeek(weekIndex)}
      className={`${CSS_PSEDUO_NAMESPACE}week`}
    >
      {getRange(DAYS_IN_WEEK).map((dayIndex) =>
        this.renderSquare(dayIndex, weekIndex * DAYS_IN_WEEK + dayIndex),
      )}
    </g>
  );
}
```

--------------------------------

### GitLab Color Scale CSS

Source: https://github.com/kevinsqi/react-calendar-heatmap/blob/master/_autodocs/styling-guide.md

CSS rules for the GitLab-inspired color scale, using shades of blue for different data intensity levels.

```css
.react-calendar-heatmap .color-gitlab-0 {
  fill: #ededed;
}
.react-calendar-heatmap .color-gitlab-1 {
  fill: #acd5f2;
}
.react-calendar-heatmap .color-gitlab-2 {
  fill: #7fa8d1;
}
.react-calendar-heatmap .color-gitlab-3 {
  fill: #49729b;
}
.react-calendar-heatmap .color-gitlab-4 {
  fill: #254e77;
}
```