Calendar
Use the KCalendar component to display dates, view events, and allow users to select specific days.
Calendar with Marked Days (Single Month)
June
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
KCalendar(
view="month"
:viewCount="1"
day="2025-06-13"
selectedDay="2025-06-13"
:definedDays="definedDays"
:markedDays="markedDays"
@dayClicked="dayClicked"
)
Multiple Months View (3 Months)
June
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
July
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
August
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
KCalendar(
view="month"
:viewCount="3"
day="2025-06-13"
selectedDay="2025-06-13"
@dayClicked="dayClicked"
)
Week View (24-Hour Schedule with Events)
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
KCalendar(
view="week"
:markedDays="markedDays"
@dayClicked="dayClicked"
)
Configure the KCalendar component using these attributes.
| Name | Type | Default | Description |
|---|
| view | 'month' | 'week' | 'month' | The type of calendar view (Month grid or Weekly schedule) |
| viewCount | number | 1 | Number of months/weeks shown simultaneously in the view |
| day | Date | string | - | The focal date determining which month/week is currently displayed |
| v-model / modelValue | Date | string | - | The currently selected date (supports standard v-model two-way binding) |
| selectedDay / v-model:selectedDay | Date | string | - | The currently selected date (supports v-model:selectedDay for backwards compatibility) |
| definedDays | IDefinedDay[] | [] | Array of rules to style or disable specific days (e.g. weekends) |
| markedDays | IMarkedDay[] | [] | Array of specific events or highlights attached to dates |
Interactivity hooks for the KCalendar.
| Name | Payload | Description |
|---|
| @dayClicked | (date: Date, marked: IMarkedDay[]) | Fired when a user clicks a calendar day |
| @update:modelValue | (date: Date | string) | Fired when a new date is selected, enabling standard v-model sync |
| @update:selectedDay | (date: Date | string) | Fired when a new date is selected, enabling v-model:selectedDay sync |