User Interface

Header Buttons

Navigation arrows in the calendar header allow for user controlled calendar navigation forwards and backwards.

February 2020
S
M
T
W
T
F
S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7

Month/Year Dropdown

To more easily skip to a more specific month/year, the user may use the navigation popover.

February 2020
S
M
T
W
T
F
S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
<v-calendar nav-visibility="visible" />

Month Steps

By default, the calendar will skip to the month following the last and preceding the first months when navigating forwards and backwards, respectively.

February 2020
S
M
T
W
T
F
S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
March 2020
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

Alternatively, you can use the step prop to configure a custom month interval to skip.

February 2020
S
M
T
W
T
F
S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
March 2020
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
<v-calendar :rows="2" :step="1" />

Min & Max Dates

If min-date or max-date props are assigned, this will disable navigation for the user beyond the dates provided.

Min Date

February 2020
S
M
T
W
T
F
S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
<v-calendar :min-date="new Date()" />

Max Date

February 2020
S
M
T
W
T
F
S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
<v-calendar :max-date="new Date()" />

Key Commands 🎉

Both v-calendar and v-date-picker now support the following key commands for navigation:

Command Action
Left Move to the previous day
Right Move to the next day
Up Move to the previous week
Down Move to the next week
Home Move to the start of the current week
End Move to the end of the current week
PgUp Move to the same day of the previous month
PgDown Move to the same day of the next month
Alt + PgUp Move to the same month and day of the previous year
Alt + PgDown Move to the same month and day of the next year

TIP

A calendar day must be in focus in order for commands to be recognized

Move Method 🎉

The base calendar component contains a move method that provides more flexible options not provided by the user interface or keyboard navigation. This method is asynchronous which can be awaited when a transition is specified.

async move(arg, opts) => Promise

Parameters

Parameter Type Description
arg *Number, Date, String or Page Object Target month criteria
opts Object Set of navigation options
opts.position Number Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position.
opts.transition String Transition type (slide-h, slide-v, fade, none). Note that this will override the calendar transition prop.
opts.force Boolean Force navigation even if the target months(s) are disabled

Returns

A Promise that resolves when the transition to the new set of month(s) is complete or rejects if target month(s) are disabled.

Move by number of months

Moves a given number of months forwards or backwards.

Calling move(num) with a positive number will move forwards by a given number of months.

Calling move(num) with a negative number will move backwards by a given number of months.

<v-calendar ref="calendar">
// Get the calendar ref
const calendar = this.$refs.calendar

// Move forwards 5 months (wait for transition)
await calendar.move(5)

// Move backwards 5 months (wait for transition)
await calendar.move(-5)

Move to month

Moves to a given month by calling move(month) with an object with month and year keys.

// Get the calendar ref
const calendar = this.$refs.calendar

// Moves to January, 1983
await calendar.move({ month: 1, year: 1983 })

Move to a date

Moves to a specified date.

Calling move(date) with a Date object will move to that date.

Calling move(date) with a String will move to the converted date.

// Get the calendar ref
const calendar = this.$refs.calendar

// Moves to today's date
await calendar.move(new Date())

// Moves to my birthday
await calendar.move(`1983-01-21`)

WARNING

Calling move(date) will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call focusDate(date) instead.

February 2020
S
M
T
W
T
F
S
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
March 2020
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11