Calendar
Full-size inline calendar with events, markers, customizable cells, and locale support.
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
1
2
vue
<script setup lang="ts">
import { ref } from 'vue'
import { VxCalendar } from 'veloxui'
const date = ref(new Date())
</script>
<template>
<VxCalendar v-model="date" />
</template>Events
Display events inside calendar cells. Each event has a title, date, and optional color. Events show as small labeled bars with colored dots.
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
29
30
31
1
2
3
Team standup
Design review
4
5
6
7
8
Sprint planning
9
10
11
12
Release v2.0
Deploy to prod
QA testing
+1 more
13
14
15
16
17
18
Demo day
19
20
21
22
23
24
25
Retrospective
26
27
28
29
30
1
2
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { CalendarEvent } from 'veloxui'
const date = ref(new Date())
const events: CalendarEvent[] = [
{ date: '2026-03-03', title: 'Team standup', color: '#3b82f6' },
{ date: '2026-03-03', title: 'Design review', color: '#8b5cf6' },
{ date: '2026-03-08', title: 'Sprint planning', color: '#22c55e' },
{ date: '2026-03-12', title: 'Release v2.0', color: '#ef4444' },
{ date: '2026-03-12', title: 'Deploy to prod', color: '#f59e0b' },
{ date: '2026-03-12', title: 'QA testing', color: '#3b82f6' },
{ date: '2026-03-12', title: 'Docs update', color: '#22c55e' },
{ date: '2026-03-18', title: 'Demo day', color: '#8b5cf6' },
]
</script>
<template>
<VxCalendar v-model="date" :events="events" />
</template>When a cell has more events than max-events (default 3), it shows a "+N more" label.
Events with Click Handler
Listen to event-click and cell-click to respond to user interactions.
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { CalendarEvent } from 'veloxui'
const date = ref(new Date())
const events: CalendarEvent[] = [
{ date: '2026-03-05', title: 'Meeting', color: '#3b82f6', id: 1 },
]
function onEventClick(event: CalendarEvent, date: Date) {
console.log('Event clicked:', event.title, 'on', date)
}
function onCellClick(date: Date) {
console.log('Cell clicked:', date)
}
</script>
<template>
<VxCalendar
v-model="date"
:events="events"
@event-click="onEventClick"
@cell-click="onCellClick"
/>
</template>Markers
Colored dots and small badges on specific dates.
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
3
21
22
23
24
25
26
27
28
29
30
1
2
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { CalendarMarker } from 'veloxui'
const date = ref(new Date())
const markers: CalendarMarker[] = [
{ date: '2026-03-05', type: 'dot', color: '#22c55e' },
{ date: '2026-03-05', type: 'dot', color: '#3b82f6' },
{ date: '2026-03-14', type: 'dot', color: '#ef4444' },
{ date: '2026-03-20', type: 'badge', color: '#8b5cf6', content: '3' },
]
</script>
<template>
<VxCalendar v-model="date" :markers="markers" />
</template>Cell Height
Adjust row height with cell-height (number in px or CSS string).
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
1
2
vue
<template>
<VxCalendar :cell-height="60" /> <!-- compact -->
<VxCalendar :cell-height="120" /> <!-- spacious -->
<VxCalendar cell-height="15vh" /> <!-- responsive -->
</template>Week Numbers
2026 April
#
Sun
Mon
Tue
Wed
Thu
Fri
Sat
14
29
30
31
1
2
3
4
15
5
6
7
8
9
10
11
16
12
13
14
15
16
17
18
17
19
20
21
22
23
24
25
18
26
27
28
29
30
1
2
vue
<template>
<VxCalendar show-week-numbers />
</template>Min / Max Date Range
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
1
2
vue
<script setup lang="ts">
import { ref } from 'vue'
const date = ref(new Date())
const minDate = new Date(2026, 2, 1) // March 1st
const maxDate = new Date(2026, 2, 31) // March 31st
</script>
<template>
<VxCalendar v-model="date" :min-date="minDate" :max-date="maxDate" />
</template>Disabled Dates
Disable specific dates with a function (e.g. weekends).
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
1
2
vue
<script setup lang="ts">
import { ref } from 'vue'
const date = ref(new Date())
function disableWeekends(date: Date) {
const day = date.getDay()
return day === 0 || day === 6
}
</script>
<template>
<VxCalendar v-model="date" :disabled-date="disableWeekends" />
</template>Custom Cell Slot
Use the cell slot for fully custom cell content. Receives { date, day, events, markers, today, selected }.
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Deadline
16
17
18
19
20
21
22
Now
23
24
25
Payday
26
27
28
29
30
1
2
vue
<script setup lang="ts">
import { ref } from 'vue'
const date = ref(new Date())
</script>
<template>
<VxCalendar v-model="date" :cell-height="80">
<template #cell="{ day, today, events, markers }">
<div v-if="day === 15" style="color: red;">Deadline</div>
<div v-if="day === 25" style="color: green;">Payday</div>
<div v-if="today" style="color: blue;">Today</div>
</template>
</VxCalendar>
</template>Custom Header Slot
Replace the entire header with the header slot. Receives navigation functions and current state.
April 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
1
2
vue
<template>
<VxCalendar>
<template #header="{ monthName, year, prevMonth, nextMonth, goToday }">
<div style="display: flex; align-items: center; justify-content: space-between; padding: 16px;">
<button @click="prevMonth">←</button>
<span>{{ monthName }} {{ year }}</span>
<button @click="nextMonth">→</button>
<button @click="goToday">Today</button>
</div>
</template>
</VxCalendar>
</template>Year Mode
2026
vue
<template>
<VxCalendar mode="year" />
</template>Hide Adjacent Months
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
vue
<template>
<VxCalendar :show-adjacent-months="false" />
</template>Locale
2026 avril
dim.
lun.
mar.
mer.
jeu.
ven.
sam.
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
1
2
2026 4月
日
月
火
水
木
金
土
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
1
2
vue
<template>
<VxCalendar locale="fr-FR" />
<VxCalendar locale="ja-JP" />
<VxCalendar locale="de-DE" />
</template>Readonly
2026 April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
1
2
vue
<template>
<VxCalendar readonly />
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | Date | number | null | null | Selected date (v-model) |
mode | 'month' | 'year' | 'month' | Display mode |
firstDayOfWeek | number | 0 | First day (0=Sun, 1=Mon) |
minDate | string | Date | null | null | Earliest selectable date |
maxDate | string | Date | null | null | Latest selectable date |
disabledDate | (date: Date) => boolean | — | Custom disable function |
markers | CalendarMarker[] | [] | Dots/badges on dates |
events | CalendarEvent[] | [] | Events displayed in cells |
showWeekNumbers | boolean | false | Show week numbers column |
showToday | boolean | true | Show "Today" button |
showAdjacentMonths | boolean | true | Show adjacent month days |
bordered | boolean | true | Show border |
readonly | boolean | false | Prevent selection |
locale | string | 'en-US' | BCP 47 locale string |
cellHeight | number | string | 100 | Row height (px or CSS) |
maxEvents | number | 3 | Max events per cell before "+N more" |
headerClass | string | '' | Custom class for header |
cellClass | string | (date: Date) => string | '' | Custom class per cell |
Events
| Event | Type | Description |
|---|---|---|
update:modelValue | (value) | Selected date changed |
change | (date) | Date selected |
panel-change | (date, mode) | Navigation changed |
cell-click | (date) | Cell clicked |
event-click | (event, date) | Event clicked |
Slots
| Slot | Props | Description |
|---|---|---|
header | { year, month, monthName, prevMonth, nextMonth, prevYear, nextYear, goToday } | Custom header |
cell | { date, day, events, markers, today, selected } | Custom cell content |
CalendarEvent Interface
ts
interface CalendarEvent {
date: string | Date
title: string
color?: string
id?: string | number
[k: string]: any // add any custom data
}CalendarMarker Interface
ts
interface CalendarMarker {
date: string | Date
type?: 'dot' | 'badge'
color?: string
content?: string
}