A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph

Overview

vue-calendar-heatmap

npm npm vue2

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

Table of contents

Installation

npm install --save vue-calendar-heatmap

Default import

Global Install:

import Vue from 'vue'
import VueCalendarHeatmap from 'vue-calendar-heatmap'

Vue.use(VueCalendarHeatmap)

Use specific components:

import Vue from 'vue'
import { CalendarHeatmap } from 'vue-calendar-heatmap'

Vue.component('calendarHeatmap', CalendarHeatmap)

or in a parent components .vue file

<script>
  import { CalendarHeatmap } from 'vue-calendar-heatmap'

  export default {
    components: {
      CalendarHeatmap
    },
    // ...
  }
</script>

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Distribution import

Global Install:

import 'vue-calendar-heatmap/dist/vue-calendar-heatmap.css'
import VueCalendarHeatmap from 'vue-calendar-heatmap/dist/vue-calendar-heatmap.common'

Vue.use(VueCalendarHeatmap)

Use specific components:

import 'vue-calendar-heatmap/dist/vue-calendar-heatmap.css'
import { CalendarHeatmap } from 'vue-calendar-heatmap/dist/vue-calendar-heatmap.common'

Vue.component('calendarHeatmap', CalendarHeatmap)

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

<link rel="stylesheet" href="vue-calendar-heatmap/dist/vue-calendar-heatmap.css"/>

<script src="vue.js"></script>
<script src="vue-calendar-heatmap/dist/vue-calendar-heatmap.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

Vue.use(VueCalendarHeatmap)

Use specific components:

Vue.component('calendarHeatmap', VueCalendarHeatmap.CalendarHeatmap)

Usage

Availables props

values - values - required

Array of objects with date and count keys. date values can be a date parseable string, a millisecond timestamp, or a Date object. count value should be a number.

 <calendar-heatmap :values="[{ date: '2018-9-22', count: 6 }, ...]" ... />

endDate - end-date - required

Can be a date parseable string, a millisecond timestamp, or a Date object. The calendar will start automatically one year before this date.

 <calendar-heatmap :end-date="2018-9-22" ... />

rangeColor - range-color

Array of 6 strings which represents the colors of the progression.

  • The color at rangeColor[0] will always represent the values for a count: null
  • The color at rangeColor[1] will always represent the values for a count: 0
  • The others are automatically distributed over the maximum value of count, unless you specify max props.

Default value is equal to the example.

 <calendar-heatmap :range-color="['ebedf0', 'dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']" ... />

max - max

Any number which should be the max color.

 <calendar-heatmap :max="10" ... />

noDataText - no-data-text

Tooltip text to display on days without data. null by default (shows no tooltip at all).

 <calendar-heatmap :no-data-text="no data for this day" ... />

tooltip - tooltip

Boolean for enable/disable tooltip on square hover. true by default.

 <calendar-heatmap :tooltip="false" ... />

tooltipUnit - tooltip-unit

String representing heatmap's unit of measure. Value is "contributions" by default.

 <calendar-heatmap tooltip-unit="stars" ... />

vertical - vertical

Boolean to switch to vertical mode. false by default.

 <calendar-heatmap :vertical="true" ... />

License

MIT

You might also like...
Vue.js Functional Calendar | Component/Package
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

πŸ“… A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+
πŸ“… A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

πŸ“… A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...

a horizontal calendar component for Vue.js

a horizontal calendar component for Vue.js

A simple vue calendar component. Base for further development and styling.

vue-simple-calendar A simple vue calendar component with minimal css. A base for further development/styling. DEMO Dependencies date-fns, lodash-es In

vue calendar fullCalendar. no jquery required. Schedule events management
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here δΈ­ζ–‡ζ–‡ζ‘£ Requirements vue: ^2

An elegant calendar and datepicker plugin for Vue.
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Full calendar base on Vue2 and momentjs.

Vue2 Calendar Component Full calendar base on Vue2 and dayjs. Support month and week view. Custom date item style with scopeSlots. δΈ­ζ–‡ζ–‡ζ‘£ πŸ“Ί Live demo I

A full event display calendar for the Quasar framework that has multiple viewing formats.
A full event display calendar for the Quasar framework that has multiple viewing formats.

Daykeep Calendar An event display calendar for the Quasar framework. Formerly known as Quasar Calendar, Daykeep Calendar for Quasar is a Quasar-flavor

Owner
Vladislav Maingart
Vladislav Maingart
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar

Welcome to Contra ?? Combines GitHub and GitLab contributions calendar to create

Ahmet Korkmaz 10 Dec 29, 2022
Simple-calendar-app - Simple Vue calendar (date-picker)

Simple vue calendar (date-picker) Vue Moment.js Installation git clone npm i npm

Dmitry Chinenov 3 Oct 31, 2022
Full featured, responsive, lightweight calendar in the browser.

Full featured, responsive, lightweight calendar in the browser.

Altin Selimi 242 Dec 18, 2022
πŸ“ A brand new kanban inspired planning tool for all your projects. πŸ’» 🚧 UNFINISHED 🚧

?? DISCLAIMER ?? This project is currently in early development and is currently not useable in any way, shape or form. Do not use in production! Once

Starlane Studios 48 Dec 26, 2022
Calendar component

vue-calendar-picker Calendar component vue-calendar-picker demo on jsfiddle Example - basic <template> <calendar></calendar> </template> <script>

Franck Freiburger 47 Nov 24, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 485 Dec 18, 2022