vue-hm-calendar
Getting started
- Install the plugin:
npm i --save vue-hm-calendar
- Add the plugin into your app:
import Vue from 'vue'
import VueHmCalendar from 'vue-hm-calendar'
Vue.use(VueHmCalendar)
- Use the
vue-hm-calendar
component:
<vue-hm-calendar />
https://codesandbox.io/s/vue-hm-calendar-ri8juy
Demo: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"