Vue2 simple event calendar.

Introduction

This is a simple and small event calendar component for Vue js. Though there already a few other calendar components, most of them are heavy and very bulky. The goal with this one is to have a calendar component that does not depend on any heavy libs like momentJs.

Table of contents

• Intro
• Installing
• Properties
  • Disabled obj
  • Highlight obj
• Events
  • Day obj
  • Event obj
• Thanks
• Upcoming

Installing

Add the package using npm.

 npm install vue2-simple-calendar

Use the component in your project. You can register it globally in your application as shown below or locally in a component

import Vue from 'vue'
import myApp from './myApp'

import vueCalendar from 'vue2-simple-calendar'

Vue.component('vue-calendar', vueCalendar)

new Vue({
  el : '#app',
  render: h => h(myApp),
  template : '<App/>',
  components : {
    App
  }
})

Component props

Prop	Type	Default	Description
events	Array	[]	Set of events to be displayed
locale	String	'en'	Locale for the month and day names
firstDay	Number/String	0	Index at which the week starts 0=sunday
fullMonthNames	Boolean	true	Display full or short month names
fullDayNames	Boolean	true	Display full or short day names
showLimit	Number	true	Max amount of events to show on a day
moreText	String	'Show more'	Set other text for the show more link
disabled	Object	{}	View the disabled settings obj
highlighted	Object	{}	View the highlighted settings obj

Disabled conf object

disabled: {
        to: new Date(2017, 9, 5),                    // Disable all dates up to specific date
        from: new Date(2017, 11, 26),                // Disable all dates after specific date
        days: [6, 0],                                // Disable Saturday's and Sunday's
        dates: [                                     // Disable an array of dates
            new Date(2017, 9, 16),
            new Date(2017, 9, 17),
            new Date(2017, 9, 18)
        ]
    }

Highlighted conf object

highlight: {
        to: new Date(2017, 9, 5),                    // Highlight all dates up to specific date
        from: new Date(2017, 11, 26),                // Highlight all dates after specific date
        days: [6, 0],                                // Highlight Saturday's and Sunday's
        dates: [                                     // Highlight an array of dates
            new Date(2017, 9, 16),
            new Date(2017, 9, 17),
            new Date(2017, 9, 18)
        ]
    }

Component events

Event	Output	Description
monthChanged	start and end date of month	Triggered on mount and when the user changes the month
dayClicked	Day obj	Triggered when the user clicks on a day
eventClicked	Event obj	Triggered when the user clicks on a event

Day object example

{
    weekDay : 0..6,                        // number of the week day --> 0..7
    date : Date,                           // Full js date object
    monthDay : 1..31,                      // Number of day in the month
    isSunday: true/false
    isSaturday: true/false,
    isWeekend: true/false   
    events: Array,                         // List of events on that day
    isToday: true/false,                   // If is current day
    isCurrentMonth: true/false             // If is part of the requested month
}

Event object example:

{
    title    : 'FooEvent',
    start    : '2017-09-01T00:00:00',
    end      : '2017-09-02T00:00:00',
    class    : 'testClass',
},

Thanks to

Special thanks to Vue full calendar on which I based my component and got my inspiration from.

Upcoming

• Improve build process
• Build demo application
• Provide tests
• Improve Date/Time handling