Vue Calendar Input

Simple, clean calendar input with single date select, or date range selection.

Demo

Installation

yarn add v-cal-input

or

npm install v-cal-input

Usage

<template>
  <div>
    <h1>Selected Date: {{ date }}</h1>
    <date-picker v-model="date"/>
  </div>
</template>

<script>
  import DatePicker from 'v-cal-input'

  export default {
    name: 'Demo',
    components: { DatePicker },
    data() {
      return { date: null }
    }
  }
</script>

Configuration

props

name	default	description
value	null	the selected date(s)
width	350	width of the calendar in px
mode	'single'	'single' or 'range'
panels	1	number of month panels to display

slots

name	description
forward	next button
backward	back button
header	panel header
dayLabel	day of week label
day	day cell

Styling

v-cal-input is designed to be simple to customize. Here's the entire structure of a calendar panel

<ol class="calendar">
  <li class="go"><!-- previous month button --></li>
  
  <li class="month-name"></li>
  
  <li class="go"><!-- next month button --></li>
  
  <li class="day-name"><!-- one for each day of the week --></li>
  
  <li class="day-pad"><!-- blank cells until the 1st of the month --></li>
  
  <li class="day"><!-- one for each day --></li>
  
  <li class="day-pad"><!-- blank cells to fill out the rest of the month --></li>
</ol>

The .day class has the following additional classes added to it based on component state.

class	mode	description
today	both	represents the current date
selected	both	currently selected
highlighted	range	between the range of selected cells
first	range	first selected in a range
last	range	last selected in a range
in-range	range	inside a selected range