> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Calendar Heatmap

> The calendar heatmap visualizes progress across time periods on a calendar, adjusting colors based on numerical values. It fits scenarios such as reviewing code volume or work activity over time. Available on the Free plan, Basic edition, Professional edition, and Dedicated edition, with style options such as block size and gradient color configuration.

| **Feature**      | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** |
| ---------------- | ------------- | ----------------- | ------------------------ | --------------------- |
| Calendar heatmap | Not supported | Supported         | Supported                | Supported             |

## 1. Introduction

The calendar heatmap visualizes progress across time periods on a calendar and adjusts colors based on numerical values. **It fits scenarios such as reviewing code volume or work activity over time.**

## 2. Instructions

### 2.2 Select Fields

In the **Date** field, make sure to select a Time Field. Otherwise, rendering will fail.

### 2.3 Style Settings

#### 2.3.1 Block Size

Configure the size of each block in the calendar.

#### 2.3.2 Gradient Colors

All numerical values are divided evenly based on the number of specified colors.

The following example shows the effect when the "numerical field" ranges within \[0, 19] and the "gradient colors" are #F2F3F5, #98caff, #518ff9, and #005cbe:

* \#F2F3F5 represents the minimum value 0
* \#98caff represents values within (0, 7]
* \#518ff9 represents values within (7, 14]
* \#005cbe represents values within (14, +∞]

### 3. FAQ

#### 3.1 Overlapping Display on Mobile

For large datasets, we recommend viewing on a PC. The display may not be optimal on mobile devices.