# vue-hm-calendar

> It is a Vue component to create a calendar heatmap

Latest version **2.1.4** (published 2022-07-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-hm-calendar
pnpm add vue-hm-calendar
yarn add vue-hm-calendar
bun add vue-hm-calendar
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.4 |
| Published | 2022-07-04 |
| First published | 2022-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 697 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | cargovova@outlook.com |
| Maintainers | cargovova |
| Keywords | vue, heatmap, calendar |

## Links

- npm: https://www.npmjs.com/package/vue-hm-calendar
- Homepage: https://github.com/cargovova/vue-hm-calendar#readme
- npm.io page: https://npm.io/package/vue-hm-calendar

## Dependencies (1)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.0

## Recent versions

- 2.1.4 (latest) — 2022-07-04
- 2.1.3 — 2022-07-04
- 2.1.2 — 2022-05-19
- 2.1.1 — 2022-05-18
- 2.1.0 — 2022-05-18
- 2.0.12 — 2022-05-04
- 2.0.11 — 2022-05-04
- 2.0.10 — 2022-04-29
- 2.0.9 — 2022-04-28
- 2.0.8 — 2022-04-08
- 2.0.7 — 2022-04-05
- 2.0.6 — 2022-04-01
- 2.0.5 — 2022-03-31
- 2.0.4 — 2022-03-31
- 2.0.3 — 2022-03-28
- … 12 more at https://npm.io/package/vue-hm-calendar/versions

## README

# vue-hm-calendar

<img src="https://github.com/cargovova/vue-hm-calendar/blob/master/screens/year.png" alt="">

<img src="https://github.com/cargovova/vue-hm-calendar/blob/master/screens/month.png" alt="">

<div style="display: flex;">
<img src="https://github.com/cargovova/vue-hm-calendar/blob/master/screens/translation.png" alt="">
<img src="https://github.com/cargovova/vue-hm-calendar/blob/master/screens/tooltip.png" alt="">
</div>

[![cargovova](https://img.shields.io/badge/cargovova-brightgreen)](https://github.com/cargovova)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://v2.vuejs.org/)
[![vue-hm-calendar](https://img.shields.io/badge/vue--hm--calendar-v2-green)](https://www.npmjs.com/package/vue-hm-calendar)
[![Coverage Status](https://coveralls.io/repos/github/cargovova/vue-hm-calendar/badge.svg?branch=master)](https://coveralls.io/github/cargovova/vue-hm-calendar?branch=master)

# Getting started

1. Install the plugin:

```
npm i --save vue-hm-calendar
```

2. Add the plugin into your app:

```javascript
import Vue from 'vue'
import VueHmCalendar from 'vue-hm-calendar'
Vue.use(VueHmCalendar)
```

3. Use the `vue-hm-calendar` component:

```html
<vue-hm-calendar />
```

### Demo: https://codesandbox.io/s/vue-hm-calendar-ri8juy

# Props:

### Short description

| Props                            | Type      | Value                                |
| -------------------------------- | --------- | ------------------------------------ |
| mode                             | _String_  | `'month' \| 'year'`                  |
| hideHeader                       | _Boolean_ | `true \| false`                      |
| firstWeekDay                     | _String_  | `'monday', 'saturday'`               |
| pastEventsColors (`3 el.`)       | _Array_   | `[HEX \| rgb() \| rgba(), ..., ...]` |
| futureEventsColors (`3 el.`)     | _Array_   | `[HEX \| rgb() \| rgba(), ..., ...]` |
| cellSize                         | _String_  | `'1px;' \| '20%' \| '1rem'`          |
| eventsDays                       | _Object_  | `{ '2022-02-01': 1, ... }`           |
| yearNumber                       | _Number_  | `2022`                               |
| monthNumber (`only month mode`)  | _Number_  | `0-11`                               |
| hideWeekNames (`only year mode`) | _Boolean_ | `true \| false`                      |
| locale                           | _String_  | `'en' \| 'de' \| 'ru'`               |
| tooltipTranslation               | _String_  | `'veranstaltungen:' \| 'событий:'`   |

### Common

**mode**

_Type_: String - `month | year`

_Description_: The mode of month setted as default.

```html
<vue-hm-calendar mode="month" />
```

**hideHeader** - `true | false`

_Type_: Boolean

_Description_: Hide a header of a calendar.

```html
<vue-hm-calendar :hideHeader="true" />
```

**firstWeekDay** - `monday, saturday`

_Type_: String

_Default_: `sunday`

_Description_: Monday or saturday.

```html
<vue-hm-calendar firstWeekDay="monday" />
```

**pastEventsColors** - `HEX, rgb(), rgba()`

_Type_: Array

_Description_: Colors for heatmaping. For one, two, three and more events in the past.

_Default_: `:pastEventsColors="['#66BB6A', '#388E3C', '#1B5E20']"`

```html
<vue-hm-calendar :pastEventsColors="['#66BB6A', '#388E3C', '#1B5E20']" />
```

**futureEventsColors** - `HEX, rgb(), rgba()`

_Type_: Array

_Description_: Colors for heatmaping. For one, two, three and more events in the future.

_Default_: `:futureEventsColors="['#BDBDBD', '#616161', '#212121']"`

```html
<vue-hm-calendar :futureEventsColors="['#BDBDBD', '#616161', '#212121']" />
```

**cellSize** - `1px; | 20% | 1rem` />

_Type_: String

_Description_: The CSS width and height property of a cell.

```html
<vue-hm-calendar cellSize="30px" />
```

**eventsDays** - `{ '2022-02-01': 1, ... }`

_Type_: Object

_Description_: Property names is dates of the month(1,2,3...), values is a count of events.

```html
<vue-hm-calendar :eventsDays="{ '2022-02-01': 1, '2022-02-02': 2 }" />
```

**yearNumber** - `2022`

_Type_: Number

```html
<vue-hm-calendar :yearNumber="2022" />
```

**locale** - `de`

_Type_: String

_Default_: `en`

```html
<vue-hm-calendar locale="de" />
```

**tooltipTranslation** - `veranstaltungen:`

_Type_: String

_Description_: Translation of first tooltip line

```html
<vue-hm-calendar tooltipTranslation="veranstaltungen:" />
```

### For the month mode

**monthNumber** - `0-11`

_Type_: Number

```html
<vue-hm-calendar :monthNumber="1" />
```

### For the year mode

**hideWeekNames**

_Type_: Boolean `true | false`

```html
<vue-hm-calendar `:hideWeekNames="true"
```

---
_Source: https://npm.io/package/vue-hm-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._