vue-hm-calendar

Getting started

1. Install the plugin:

npm i --save vue-hm-calendar

2. Add the plugin into your app:

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

3. Use the vue-hm-calendar component:

<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.

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

hideHeader - true | false

Type: Boolean

Description: Hide a header of a calendar.

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

firstWeekDay - monday, saturday

Type: String

Default: sunday

Description: Monday or saturday.

<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']"

<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']"

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

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

Type: String

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

<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.

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

yearNumber - 2022

Type: Number

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

locale - de

Type: String

Default: en

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

tooltipTranslation - veranstaltungen:

Type: String

Description: Translation of first tooltip line

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

For the month mode

monthNumber - 0-11

Type: Number

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

For the year mode

hideWeekNames

Type: Boolean true | false

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