# vue-calendar-picker Calendar component ![vue-calendar-picker screenshot](https://cloud.githubusercontent.com/assets/25509586/26058700/40d539be-397f-11e7-86ad-d0af0f21e64d.png) [vue-calendar-picker demo on jsfiddle](https://jsfiddle.net/b8z8wh1j/101/) ## Example - basic ```vue ``` ## 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](https://github.com/date-fns/date-fns/tree/master/src/locale)) * 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](https://date-fns.org/), 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](https://github.com/date-fns/date-fns/tree/master/src/locale).
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
```css
.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---calendarvue) API.
#### :compact - see [calendar.vue](#api---calendarvue) API.
#### :initialView - see [calendar.vue](#api---calendarvue) API.
#### :initialCurrent - see [calendar.vue](#api---calendarvue) API.
#### :itemClass - see [calendar.vue](#api---calendarvue) 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](#api---calendarvue) 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---calendarvue) API.
#### :compact - see [calendar.vue](#api---calendarvue) API.
#### :initialView - see [calendar.vue](#api---calendarvue) API.
#### :initialCurrent - see [calendar.vue](#api---calendarvue) API.
#### :itemClass - see [calendar.vue](#api---calendarvue) API.

#### :events - see [calendarEvents.vue](#api---calendareventsvue) API.
#### :selection - see [calendarEvents.vue](#api---calendareventsvue) 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](#api---calendareventsvue).

### 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](https://github.com/vuejs/vue/blob/dev/README.md)

## Example - advanced
```vue

```

## Demo
![vue-calendar-picker demo](https://cloud.githubusercontent.com/assets/25509586/26059550/7863fa02-3982-11e7-8a20-83f77dbfe4de.gif)

## Credits
[ Franck Freiburger](https://www.franck-freiburger.com)}}}}}}}}}}}}}}

	Stars	Issues	Version	Updated	Created
vue-calendar-picker	46	5	2.0.3	6 years ago	7 years ago
vue-event-calendar	637	31	1.5.2	6 years ago	7 years ago
vue-jlunar-datepicker	59	4	2.3.2	5 years ago	7 years ago
vue2-calendar			1.0.2	7 years ago	7 years ago

vue-calendar-picker vs vue-event-calendar vs vue-jlunar-datepicker vs vue2-calendar

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past