VCalendar

Appearance

On this page

VCalendar ​

Welcome to VCalendar, a calendar a date picker plugin for Vue.js.

Version 3 brings a host of feature improvements and bug fixes, including weekly views, a simplified time picker, repeating date ranges, time rules, and performance improvements.

If upgrading from version 2.0, be sure to view the upgrade guide for breaking changes.

Get Started View 2.0 Documentation

Theme ​

VCalendar provides attractive default styling based on simple colors and dark mode.

S
M
T
W
T
F
S
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
30
1
2
3
4
5
6
7
8
9
10
11

Custom styling with class overrides and css variables are also available.

Read more

Layouts ​

Calendars may be configured to adapt for multiple layouts. For example, weekly calendars can be used in constrained environments.

Sun
Mon
Tue
Wed
Thu
Fri
Sat
2
3
4
5
6
7
8

Also, calendars can also be configured for multi-row and multi-column layouts.

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

Read more

Attributes ​

Decorate calendars with attributes on specified dates or date ranges. They can even be displayed for repeating date patterns.

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

Read more

Date Picker ​

VDatePicker is a feature-rich date picker component implemented as a wrapper for VCalendar, which can easily bind to a variety of date formats.

Value:10/15/2023, 8:04:34 PM (Date)
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

Read more

Even date ranges are supported

Start:1/6/2020, 12:00:00 AM (date)
End:1/10/2020, 12:00:00 AM (date)
S
M
T
W
T
F
S
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
30
31
1
2
3
4
5
6
7
8

Read more

Time selection is also supported with configurable hour, minute, second and millisecond accuracy.

Value:10/15/2023, 8:04:34 PM (Date)
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
SunOct152023
:

Read more

Flexible rules can also be easily configured to dynamically limit time selection, like afternoon hours and 5-minute increments.

Value:10/15/2023, 8:04:34 PM (Date)
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
SunOct152023
:

Read more

Released under the MIT License.

Copyright © 2017-present Nathan Reyes