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
<!-- previous month button --> <!-- next month button --> <!-- one for each day of the week --> <!-- blank cells until the 1st of the month --> <!-- one for each day --> <!-- blank cells to fill out the rest of the month -->
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 |