A full 12-Month view calendar made by vue.js
npm install vue-material-year-calendarEnglish | ็น้ซไธญๆ

> 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
``console`
npm install vue-material-year-calendar --save
vue
v-model="year"
:activeDates.sync="activeDates"
@toggleDate="toggleDate"
prefixClass="your_customized_wrapper_class"
:activeClass="activeClass"
>
`
๐ props
$3
* Type: String | Number
* Required: trueThe 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: trueA wrapper classname for customized css. Set
prefixClass's value, then use it value as a class wrapper in CSS.ex:
`vue
...
prefixClass="your_customized_wrapper_class"
>
.your_customized_wrapper_class
background-color: #0aa
color: white
&.red
background-color: #a00
color: white
&:after
background-image url('./assets/baseline-remove_circle-24px.svg')
background-size 100% 100%
&.blue
background-color: #0000aa
color: white
&.your_customized_classname
background-color: yellow
color: black
`$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.

$3
* Type: String
* Default: enChoose language to displayed.
en: English, tw: ็น้ซไธญๆ, pt: Portuguรชs, de: Deutsch, pl: Polish, ru: ะ ัััะบะธะน$3
* Type: Boolean
* Default: trueShow or hide the years selector on top of the calendar.
ex:
`javascript
:showYearSelector="false"
`
$3
* Type: Boolean
* Default: falseHide or show all sundays in the calendar.
ex:
`javascript
:hideSunday="true"
`$3
* Type: Boolean
* Default: falseHide or show all weekends (saturdays and sundays) in the calendar.
ex:
`javascript
:hideWeekend="true"
`๐ event
$3
* Type: functionFunction will be called when you select/unselect a date.
ex:
`vue
@toggleDate="myToggleDate"
>
`
$3
* $event: { year: 2021, month: 1, monthTitle: 'January' }
Trigger when user click month title.
ex:
`vue
@monthClickEvent="monthClick"
>
``