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"