Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/nono1526/vue-material-year-calendar

A full 12-Month view calendar made by vue.js.
https://github.com/nono1526/vue-material-year-calendar

Last synced: about 2 months ago
JSON representation

A full 12-Month view calendar made by vue.js.

Lists

README 

        
English | [繁體中文](./doc/tw.md)

![](https://i.imgur.com/7rinsub.png)





Versions Downloads License

  



> 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](https://github.com/iamkun/dayjs)

* πŸ€ by Vue.js  



### [Simple Live Demo](https://nono1526.github.io/vue-material-year-calendar)



## Basic usage  



![Basic_demo](https://media.giphy.com/media/LXQxkdBrhmVzOEMbQf/giphy.gif)  

## Draggable

![demo](https://media.giphy.com/media/BZkjvL89E4dDvUikAl/giphy.gif)  

## Classification

![Classification](https://i.imgur.com/3KB3RK7.png)---

## Getting Started



### πŸ“š Installation



```console

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

```



### πŸ“š Example

```vue



  



import YearCalendar from 'vue-material-year-calendar'



export default {

  components: { YearCalendar },

  data () {

    return {

      year: 2019,

      activeDates: [

        { date: '2019-02-13' },

        { date: '2019-02-14', className: 'red' },

        { date: '2019-02-15', className: 'blue' },

        { date: '2019-02-16', className: 'your_customized_classname' }

      ],

      activeClass: '',

    }

  },

  methods: {

    toggleDate (dateInfo) {

      console.log(dateInfo)  // { date: '2010-10-23', selected: true }

    }

  }

}



.your_customized_wrapper_class

  background-color: #0aa

  color: white

  &.red

    background-color: red

    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



```



## πŸ“š props

### v-model

   * Type: `String` | `Number`

   * Required: `true`



The year to be display.



### activeDates.sync

   * 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' }

  ],

```



### prefixClass

  * 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



.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



```



### activeClass



  * 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)



### lang

   * Type: `String`

   * Default: `en`



Choose language to displayed.



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



### showYearSelector

   * Type: `Boolean`

   * Default: `true`



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



ex:

```javascript

:showYearSelector="false"

```



### hideSunday

   * Type: `Boolean`

   * Default: `false`



Hide or show all sundays in the calendar.



ex:

```javascript

:hideSunday="true"

```



### hideWeekend

   * Type: `Boolean`

   * Default: `false`



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



ex:

```javascript

:hideWeekend="true"

```



## πŸ“š event

### @toggleDate

   * Type: `function`



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



ex:  



```vue



  



  .....

  methods: {

    myToggleDate (dateInfo) {

      console.log(dateInfo) // { date: '2010-10-23', selected: true }

    }

  }



```



### @monthClick

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



Trigger when user click month title.



ex: 



```vue



  



  .....

  methods: {

    monthClick (monthYearInfo) {

      console.log(monthYearInfo) // { year: 2021, month: 1, monthTitle: 'January' }

    }

  }



```