vue-calendar-picker

Calendar component

vue-calendar-picker demo on jsfiddle

Example - basic

<template>
    <calendar></calendar>
</template>
 
<script>
 
import {calendar} from 'vue-calendar-picker'
 
export default {
    components: {
        calendar: calendar
    }
}
 
</script>

Install

npm install --save vue-calendar-picker

Features

• zoom from decade view to hour view (decade, year, month, week, day, hour)
• localized (see supported locale list)
• autodetect the first day of the week
• animated (zoom & slide)
• multiple calendar views (side-by-side)
• display one-time events and date/time period
• date/time period selection
• touch screen support
• only one dependancy: date-fns, a Modern JavaScript date utility library

vue-calendar-picker has 3 available components:

• calendar.vue: simple calendar.
• calendarEvents.vue: calendar.vue + one-time events and date/time periods display.
• calendarRange.vue: calendarEvents.vue + range selection.

Conventions

• date ranges are inclusive, exclusive ([start, end[)

API - calendar.vue

Properties

:locale ^{string, default: navigator.language}

The locale of the calendar. Impacts the days names, month names and first day ofthe week. supported locale list. Locale name must be uppercase.

:compact ^{boolean, default: false}

Enable compact mode. Use less UI space.

:initialView ^{number, default: 6 (month view)}

Initial view zoom.

:initialCurrent ^{Date, default: new Date}

Initial view date.

:itemClass ^{function(range), default: empty function}

Called for each calendar cell. The retun valus is used as className of the cell.

:viewCount ^{number, default: 1}

Allow to display multiple calendar views side-by-side.

:showOverlappingDays ^{boolean, default: viewCount === 1}

In the month view, show days belonging to the preceding and following month.

Events

@action ^{(eventObject)}

eventObject has the following properties:

eventType ^string

• 'down': mousedown or touchstart
• 'up': mouseup or touchend
• 'tap': click or tap
• 'press': dblclick or longtap
• 'over': mouseover or touchmove

eventActive ^boolean

Indicates that the pointer is active: a mouse button is down or the finger touches the screen.

keyActive ^boolean

Indicates that the shift or ctrl or alt or meta key is down. Always false on touch-screen devices.

range ^{{ start: Date, end: Date }}

The date range of the item

rangeType ^string

The range name: 'minute', 'hour', 'day', 'week', 'month', 'year'.

Slots

default slot ^{scope: itemRange, layout / default: empty}

The content of calendar cells.

itemRange { start: Date, end: Date }

The time range of the the cell.

layout ^string

The layout of the content, either 'horizontal' or 'vertical'.

Styling

vue-calendar-picker can by styled easily, all css selectors are prefixed with .calendar.

example

.calendar {
    border: 2px solid #000;
    border-radius: 0.5em;
    padding: 0.5em;
}

UI details

• click on date part in the calendar header area to modify it (zoom out)
• click or double-click on the cell to zoom in. (from month view, use double-click to zoom in)

API - calendarEvents.vue

Properties

:locale - see calendar.vue API.

:compact - see calendar.vue API.

:initialView - see calendar.vue API.

:initialCurrent - see calendar.vue API.

:itemClass - see calendar.vue API.

:events ^{Array for { color: CSS color, start: Date, end: Date }}

A list of one-time events and date/time periods to display in the calendar.
One-time events has the same start and end date.

:selection ^{{ start: Date, end: Date }}

The current calendar selection. For display only.

Events

@action ^{(eventObject)}

eventObject has the same properties that calendar.vue added:

calendarEvent ^object

A reference to a calendar event (see :events property) related to the mouse/touch event, otherwise undefined.

UI details

• event range are colored lines
• event point are big dots

API - calendarRange.vue

Allow user selection. The selection property object is modified according to the user's selection.

Properties

:locale - see calendar.vue API.

:compact - see calendar.vue API.

:initialView - see calendar.vue API.

:initialCurrent - see calendar.vue API.

:itemClass - see calendar.vue API.

:events - see calendarEvents.vue API.

:selection - see calendarEvents.vue API.

:useTwoCalendars ^{boolean, default: false}

Display two calendars side-by-side to make selection easier.

Events

@action ^{(eventObject)}

eventObject has the same properties that calendar.vue.

UI details

• use mousedown + move or tap + move to select a range (also across calendars)
• use ctrl + click to update the selection from the nearest end point (disbled on touch screens)

Browser support

Same browser support as Vue.js 2

Example - advanced

<template>
    <calendar-range :events="calendarEvents" :selection="calendarSelection"></calendar-range>
</template>
 
<script>
 
import {calendarRange} from 'vue-calendar-picker'
 
export default {
    components: {
        calendarRange: calendarRange
    },
    data() {
        return {
            calendarEvents: [
                // periods
                { color:'#aaf', start: new Date(2016, 9, 5, 0,0,0,0), end: new Date(2017, 4, 15, 0,0,0,0) },
                { color:'#afa', start: new Date(2016, 9, 5, 0,0,0,0), end: new Date(2017, 4, 13, 0,0,0,0) },
                { color:'#faa', start: new Date(2017, 4, 8, 12,30, 0,0), end: new Date(2017, 4, 9, 6,30, 0,0) },
                // one-time
                { color:'#faa', start: new Date(2017, 4, 2, 0,0,0,0), end: new Date(2017, 4, 2, 0,0,0,0) },
                { color:'#aaa', start: new Date(2017, 4, 2, 0,0,0,0), end: new Date(2017, 4, 2, 0,0,0,0) },
            ],
            calendarSelection: {
                start: new Date(2017, 4, 2), end: new Date(2017, 4, 7, 12)
            }
        }
    }
}
</script>

Demo

Credits

Franck Freiburger