Быстрый старт
За 3 шага
Подключите компонент за три шага:
1. Установка
sh
pnpm add vue-calendar-activitysh
npm install vue-calendar-activitysh
yarn add vue-calendar-activity2. Добавьте в свой компонент
vue
<script setup lang="ts">
import { CalendarHeatmap } from 'vue-calendar-activity'
import 'vue-calendar-activity/style.css'
const data = {
'2024-03-10': 3,
'2024-05-22': 8,
'2024-07-04': 5,
'2024-09-18': 2,
'2024-11-30': 9,
}
</script>
<template>
<CalendarHeatmap :data="data" />
</template>3. Результат
Mon
Tue
Wed
Thu
Fri
Sat
Sun
TIP
data принимает и объект-карту { 'YYYY-MM-DD': значение }, и массив [{ date, value }]. См. Форматы данных ниже.
Установка
sh
pnpm add vue-calendar-activitysh
npm install vue-calendar-activitysh
yarn add vue-calendar-activityБазовое использование
Импортируйте компонент и его стили, затем передайте данные:
vue
<script setup lang="ts">
import { CalendarHeatmap } from 'vue-calendar-activity'
import 'vue-calendar-activity/style.css'
const data = [
{ date: '2024-06-15', value: 4 },
{ date: '2024-09-20', value: 2 },
{ date: '2024-12-10', value: 7 },
]
</script>
<template>
<CalendarHeatmap :data="data" start-date="2024-01-01" end-date="2024-12-31" />
</template>Mon
Tue
Wed
Thu
Fri
Sat
Sun
Форматы данных
Компонент принимает два формата — используйте тот, что удобнее вашему бэкенду:
ts
// Массив объектов
const data = [
{ date: '2024-01-15', value: 5 },
{ date: '2024-01-16', value: 2 },
]
// Объект-карта { 'YYYY-MM-DD': значение }
const data = {
'2024-01-15': 5,
'2024-01-16': 2,
}Диапазон дат
Используйте range для частых пресетов или startDate/endDate для полного контроля:
vue
<!-- Последний год (по умолчанию) -->
<CalendarHeatmap :data="data" range="year" />
<!-- Только текущий месяц -->
<CalendarHeatmap :data="data" range="month" />
<!-- Произвольный диапазон -->
<CalendarHeatmap
:data="data"
start-date="2023-01-01"
end-date="2023-12-31"
/>Обработка событий
vue
<script setup lang="ts">
import type { HeatmapDay } from 'vue-calendar-activity'
function onDayClick(day: HeatmapDay, event: MouseEvent) {
console.log(day.date, day.value)
}
</script>
<template>
<CalendarHeatmap :data="data" @cell-click="onDayClick" />
</template>