vue-material-year-calendar

English | 繁體中文

> There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem.

* 🔥 12 Months on a page
* 🌈 Material style
* 🕒 depend on dayjs
* 🍀 by Vue.js

$3

Basic usage

!Basic_demo

Draggable

!demo

Classification

!Classification---

Getting Started

$3

``console
npm install vue-material-year-calendar --save
`

$3


`vue


`




📚 props

$3

* Type: String | Number
* Required: true

The year to be display.

$3

* Type: Array of objects
* Required: true
* Default: []
Your selected dates.

If you set className attributes, you can customize it style in CSS.

ex:
`javascript
[
{ date: '2019-02-13' },
{ date: '2019-02-14', className: 'red' },
{ date: '2019-02-15', className: 'blue' },
{ date: '2019-02-16', className: 'your_customized_classname' }
],
`

$3


* Type: String
* Default: calendar--active
* Required: true

A wrapper classname for customized css. Set prefixClass's value, then use it value as a class wrapper in CSS.

ex:

`vue



`

$3

* Type: String (default class: info or warning )
* Default: ''(empty string)

The classname you want to toggle. For example, set activeClass to my_red first. Then you click a date on calendar, the date will be add/remove with my_red class.
![](https://i.imgur.com/Lmp3RG1.png)




$3


* Type: String
* Default: en

Choose language to displayed.

en: English, tw: 繁體中文, pt: Português, de: Deutsch, pl: Polish, ru: Русский

$3


* Type: Boolean
* Default: true

Show or hide the years selector on top of the calendar.

ex:
`javascript
:showYearSelector="false"
`




$3


* Type: Boolean
* Default: false

Hide or show all sundays in the calendar.

ex:
`javascript
:hideSunday="true"
`

$3


* Type: Boolean
* Default: false

Hide or show all weekends (saturdays and sundays) in the calendar.

ex:
`javascript
:hideWeekend="true"
`

📚 event

$3

* Type: function

Function will be called when you select/unselect a date.

ex:

`vue



`




$3


* $event: { year: 2021, month: 1, monthTitle: 'January' }

Trigger when user click month title.

ex:

`vue



``