easy-vue-calendar

Project setup

npm i --save easy-vue-calendar

Example to use

<template>
    <EasyCalendar 
      :items="items"
      @dayClicked="dayClicked"
      @itemClicked="itemClicked"
      @prevMonthClicked="prevMonthClicked"
      @nextMonthClicked="nextMonthClicked"
      v-model="daySelected"
    />
</template>

<script>
    import EasyCalendar from 'easy-vue-calendar'
    export default {
        components: {
            EasyCalendar
        }
        data () {
            return {
                items: [
                    {
                        title: 'test',
                        day: '2020-06-10',
                        background: '#000',
                        color: '#FFF',
                        // Other data...
                    }
                ],
                daySelected: '2020-03-15'
            }
        },
        methods: {
            dayClicked ($event) {
                console.log($event)
            },

            itemClicked ($event) {
                console.log($event)
            },

            prevMonthClicked($event) {
                console.log($event)
            },

            nextMonthClicked ($event) {
                console.log($event)
            }
        },
    }
</script>

Items are the events that can be passed to the calendar. It is an array type and can be passed any data (To be retrieved later), however some data needs to have its particularities.

Data that needs to be respected

Name	Description
title	The title that will appear on the label
data	The day the label will fit
color	The font color of the label
background	The background color of the label

Language support

<template>
    <EasyCalendar 
      :items="items"
      @dayClicked="dayClicked"
      @itemClicked="itemClicked"
      @prevMonthClicked="prevMonthClicked"
      @nextMonthClicked="nextMonthClicked"
      :showButtonsHeader="true"
      textButtonNext="Next"    <--- Add
      textButtonPrev="Prev"    <--- Add
      :weeks="weeks"           <--- Add
      :months="months"         <--- Add
    />
</template>

<script>
    import EasyCalendar from 'easy-vue-calendar'
    export default {
        name: 'App',
        components: {
            EasyCalendar
        },
        data () {
            return {
                items: [
                    {
                        title: 'teste',
                        day: '2020-06-10'
                    }
                ],
                weeks: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
            }
        }
    }
</script>

Props

Name	Type	Default	Example
items	array	[]
showButtonsHeader	boolean	true
showButtonAdd	boolean	true
weeks	array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
months	array	['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
minimalist	boolean	false
disabledDays	array	[]	["2021-03-20", "2021-03-10"]

Events

Name	Return
dayClicked	an object as long as the day clicked
itemClicked	an object containing the title and day of the item clicked
prevMonthClicked	a json object with the start date and end date shown on the calendar
nextMonthClicked	a json object with the start date and end date shown on the calendar

API

<template>
    <EasyCalendar 
      ...
      ref="calendar"
    />


</template>

<script>
    import EasyCalendar from 'easy-vue-calendar'
    export default {
        name: 'App',
        components: {
            EasyCalendar
        },
        ...

        methods: {
            nextMonth () {
                this.$refs.calendar.nextMonth() // <--- change next month
            },
            prevMonth () {
                this.$refs.calendar.prevMonth() // <--- change prev month
            }
        }
    }
</script>