Calendar
Use the KCalendar component to display dates, view events, and allow users to select specific days.
Calendar with Marked Days
2025
June
Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
TypeScript
// 1. Define custom styled recurring days (e.g. Weekends)
const definedDays: IDefinedDay[] = [
{
date: {
startDate: '2025-01-01',
endDate: '2025-12-31',
recurringRules: [{ unit: 'month', daysOfWeek: ['Sat', 'Sun'], unitOccuranceStartIndex: 0 }]
},
dayStyle: { isOffday: true, isUnderlined: true, isDisabled: true }
}
]
// 2. Highlight specific events or dates
const markedDays = ref<IMarkedDay[]>([
{
date: { recurringRules: [{ unit: 'year', daysOfYear: [{ month: 1, day: 30 }] }] },
type: 'error',
label: 'My Birthday',
description: 'This is my birthday'
}
])
// 3. Use Component
KCalendar(
view="month"
day="2025-06-13"
selectedDay="2025-06-13"
:definedDays="definedDays"
:markedDays="markedDays"
@dayClicked="dayClicked"
)
Attributes
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 |
| selectedDay | Date | string | - | The currently selected date (supports v-model:selectedDay) |
| 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 |
Events
Interactivity hooks for the KCalendar.
| Name | Payload | Description |
|---|---|---|
| @dayClicked | (date: Date, marked: IMarkedDay[]) | Fired when a user clicks a calendar day |
| @update:selectedDay | (date: Date | string) | Fired when a new date is selected, enabling v-model sync |