Newton's Poleless Magnet

    vue-hm-calendar

    2.1.2 • Public • Published

    vue-hm-calendar

    cargovova vue2 vue-hm-calendar Coverage Status

    Getting started

    1. Install the plugin:
    npm i --save vue-hm-calendar
    
    1. Add the plugin into your app:
    import Vue from 'vue'
    import VueHmCalendar from 'vue-hm-calendar'
    Vue.use(VueHmCalendar)
    1. 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"

    Install

    npm i vue-hm-calendar

    DownloadsWeekly Downloads

    32

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    714 kB

    Total Files

    14

    Last publish

    Collaborators

    • cargovova