https://github.com/razorness/vue3-calendar-heatmap

A lightweight calendar heatmap Vue 3 component built on SVG, inspired by julienr114's vue-calendar-heatmap and github's contribution calendar graph
https://github.com/razorness/vue3-calendar-heatmap

calendar heatmap typescript vue vue3 vue3-typescript

Last synced: 10 months ago
JSON representation

A lightweight calendar heatmap Vue 3 component built on SVG, inspired by julienr114's vue-calendar-heatmap and github's contribution calendar graph

• Host: GitHub
• URL: https://github.com/razorness/vue3-calendar-heatmap
• Owner: razorness
• License: mit
• Fork: true (julienr114/vue-calendar-heatmap)
• Created: 2019-03-15T21:31:44.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-02T12:58:29.000Z (about 2 years ago)
• Last Synced: 2024-11-18T04:25:30.508Z (over 1 year ago)
• Topics: calendar, heatmap, typescript, vue, vue3, vue3-typescript
• Language: TypeScript
• Homepage: https://razorness.github.io/vue3-calendar-heatmap
• Size: 840 KB
• Stars: 91
• Watchers: 2
• Forks: 18
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue3-calendar-heatmap - A lightweight calendar heatmap Vue 3 component built on SVG (Components & Libraries / UI Components)

README

          
# vue3-calendar-heatmap

![](https://user-images.githubusercontent.com/684302/142281760-eaeccf78-5cc8-450d-8407-6208aafb63a2.png)

[![npm](https://img.shields.io/npm/v/vue3-calendar-heatmap.svg?style=flat-square)](https://www.npmjs.com/package/vue3-calendar-heatmap)

[![npm](https://img.shields.io/npm/dm/vue3-calendar-heatmap?style=flat-square)](https://www.npmjs.com/package/vue3-calendar-heatmap)

[![size](https://img.shields.io/bundlephobia/minzip/vue3-calendar-heatmap?label=size&style=flat-square)](https://www.npmjs.com/package/vue3-calendar-heatmap)

[![TypeScript](https://img.shields.io/badge/-Typescript-informational?style=flat-square)](https://www.typescriptlang.org/)

[![vue2](https://img.shields.io/badge/vue-3.x-brightgreen.svg?style=flat-square)](https://vuejs.org/)

A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph. With vertical mode, tooltip powered

by [Tippy.js](https://github.com/atomiks/tippyjs).

## Documentation

[https://razorness.github.io/vue3-calendar-heatmap](https://razorness.github.io/vue3-calendar-heatmap)

## Examples

![](https://user-images.githubusercontent.com/684302/142281986-17d96753-dfd9-41e0-baf7-f411cec32167.png)

![](https://user-images.githubusercontent.com/684302/142281712-8cdaf65e-221d-413c-b367-f4c43f2fe98b.png)

## License

[MIT](http://opensource.org/licenses/MIT)