### Basic Calendar Heatmap Example

Source: https://context7_llms

Demonstrates a basic calendar heatmap with a GitHub-style contribution graph. It uses `variantClassnames` for styling and `datesPerVariant` to assign dates to specific intensity levels.

```tsx
import { CalendarHeatmap } from "@/components/ui/calendar-heatmap"

<CalendarHeatmap
  variantClassnames={[
    "text-white hover:text-white bg-green-400 hover:bg-green-400",
    "text-white hover:text-white bg-green-500 hover:bg-green-500",
    "text-white hover:text-white bg-green-700 hover:bg-green-700",
  ]}
  datesPerVariant={[
    [new Date('Jan 1, 2024'), new Date('Jan 15, 2024')],  // Low intensity
    [new Date('Jun 12, 2024'), new Date('July 1, 2024')], // Medium intensity
    [new Date('Jan 19, 2024'), new Date('Apr 14, 2024')], // High intensity
  ]}
/>
```

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

### Rainbow Variant Calendar Heatmap

Source: https://context7_llms

An example demonstrating a multi-color (rainbow) variant for the calendar heatmap. It defines an array of color classes and uses it with `variantClassnames`.

```typescript
const Rainbow = [
  "text-white hover:text-white bg-violet-400 hover:bg-violet-400",
  "text-white hover:text-white bg-indigo-400 hover:bg-indigo-400",
  "text-white hover:text-white bg-blue-400 hover:bg-blue-400",
  "text-white hover:text-white bg-green-400 hover:bg-green-400",
  "text-white hover:text-white bg-yellow-400 hover:bg-yellow-400",
  "text-white hover:text-white bg-orange-400 hover:bg-orange-400",
  "text-white hover:text-white bg-red-400 hover:bg-red-400",
]
```

```tsx
<CalendarHeatmap
  numberOfMonths={2}
  variantClassnames={Rainbow}
  datesPerVariant={rainbowDates}
/>
```

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

### Multi-Month Calendar Heatmap

Source: https://context7_llms

Shows how to configure the heatmap to display multiple months by setting the `numberOfMonths` prop. This example also uses `datesPerVariant` for date distribution.

```tsx
<CalendarHeatmap
  numberOfMonths={3}
  variantClassnames={[
    "text-white hover:text-white bg-green-400 hover:bg-green-400",
    "text-white hover:text-white bg-green-500 hover:bg-green-500",
    "text-white hover:text-white bg-green-700 hover:bg-green-700",
  ]}
  datesPerVariant={[
    [/* dates for variant 0 */],
    [/* dates for variant 1 */],
    [/* dates for variant 2 */],
  ]}
/>
```

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

### Calendar Heatmap with Weighted Dates

Source: https://context7_llms

Illustrates using the `weightedDates` prop for automatic date categorization based on assigned weights. This is useful for data where each date has an associated numerical value.

```tsx
<CalendarHeatmap
  variantClassnames={[
    "text-white hover:text-white bg-blue-300 hover:bg-blue-300",
    "text-white hover:text-white bg-green-500 hover:bg-green-500",
    "text-white hover:text-white bg-amber-400 hover:bg-amber-400",
    "text-white hover:text-white bg-red-700 hover:bg-red-700",
  ]}
  weightedDates={[
    { date: new Date('Jan 1, 2024'), weight: 2 },
    { date: new Date('Jan 15, 2024'), weight: 1.5 },
    { date: new Date('Jun 12, 2024'), weight: 8 },
    { date: new Date('July 1, 2024'), weight: 5 },
    { date: new Date('Jan 19, 2024'), weight: 6 },
    { date: new Date('Apr 19, 2024'), weight: 13.5 },
  ]}
/>
```

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

### Using DayPicker Props - React (tsx)

Source: https://context7_llms

Extend the functionality of the CalendarHeatmap component by utilizing any of the available DayPicker props. This includes setting date ranges with `fromDate` and `toDate`, disabling specific dates using the `disabled` prop, and handling user interactions like day clicks with `onDayClick`. These props enable dynamic behavior and user interaction customization.

```tsx
<CalendarHeatmap
  variantClassnames={[...]}
  datesPerVariant={[...]}
  fromDate={new Date('2024-01-01')}
  toDate={new Date('2024-12-31')}
  disabled={[new Date('2024-07-04')]}
  onDayClick={(day) => console.log(day)}
/>
```

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

### WeightedDateEntry Type Definition

Source: https://context7_llms

Defines the structure for date entries when using weighted dates. Each entry includes a Date object and a numerical weight to determine its intensity level in the heatmap.

```typescript
type WeightedDateEntry = {
  date: Date
  weight: number
}
```

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

### Custom Styling with classNames - React (tsx)

Source: https://context7_llms

Override default calendar styles by providing custom Tailwind CSS classes to the `classNames` prop. This allows for granular control over the appearance of months, captions, and other calendar elements. Ensure the provided classes are compatible with the target CSS framework (e.g., Tailwind CSS).

```tsx
<CalendarHeatmap
  variantClassnames={[...]}
  datesPerVariant={[...]}
  classNames={{
    months: "flex flex-col",
    month: "space-y-2",
    caption: "text-lg font-bold",
    // ... other DayPicker classNames
  }}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.