Calendar
A neo-brutalist style calendar component built on v-calendar DatePicker, supporting single date and date range selection. It features the signature brutal style with thick borders and hard shadows, along with visual feedback for selected state, range state, and today highlight.
Demo
基础用法
v-model 绑定（选中日期：未选择）
日期范围选择（isRange）
禁用状态
Installation
pnpm dlx brutx-vue@latest add calendarAdditional dependency required:
pnpm add v-calendarUsage
Single Date Selection
<script setup>
import { ref } from 'vue'
import { Calendar } from 'brutx-ui-vue/calendar'
const date = ref(null)
</script>
<template>
<Calendar v-model="date" />
</template>Date Range Selection
<script setup>
import { ref } from 'vue'
import { Calendar } from 'brutx-ui-vue/calendar'
const dateRange = ref(null)
</script>
<template>
<Calendar v-model="dateRange" :is-range="true" />
</template>Disabled State
<template>
<Calendar :disabled="true" />
</template>Locale
Calendar reads the code from the locale pack provided through provideLocale. If the pack has no code, it uses zh-CN. Set locale to a v-calendar locale code to override the language for one calendar:
<Calendar locale="en-US" />API Reference
| Name | Type | Default | Description |
|---|---|---|---|
modelValueNullable | Date | Date[] | null | undefined | undefined | The selected date, updated with v-model; single mode uses a Date, range mode uses an array containing the start and end dates, and an empty selection is null. |
DetailsDeclared typeDate | Date[] | null | undefined Literal values
Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
isRange | boolean | undefined | false | Enables date-range selection; modelValue should represent the start and end dates. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
disabled | boolean | undefined | false | Disables date selection interaction in the calendar. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
class | string | undefined | undefined | CSS classes added to the calendar root container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
events | CalendarEvent[] | undefined | []Factory evaluated per instance | Provides calendar events to mark; each item has a date and title and may include custom fields. |
DetailsDeclared typeCalendarEvent[] | undefined Referenced types CalendarEvent Type definition — CalendarEventexport interface CalendarEvent {
date: Date | string
title: string
[key: string]: unknown
}Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
eventRenderer | ((event: CalendarEvent) => unknown) | undefined | undefined | Callback for customizing event display content; receives a CalendarEvent and returns renderable content. |
DetailsDeclared type((event: CalendarEvent) => unknown) | undefined Referenced types CalendarEvent Type definition — CalendarEventexport interface CalendarEvent {
date: Date | string
title: string
[key: string]: unknown
}Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
mode | "default" | "card" | undefined | "default" | Sets how event markers are rendered: default uses dots and tooltips, while card uses calendar cards and badges. |
DetailsDeclared type"default" | "card" | undefined Literal values
Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
locale | string | undefined | undefined | The v-calendar locale code; defaults to the current useLocale() language-pack code, with zh-CN as the fallback. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
retroHeader | boolean | undefined | false | Shows a retro wall-calendar header decoration; the decorative elements carry no accessibility semantics. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/calendar/Calendar.vue | |||
| Name | Signature or type | Description |
|---|---|---|
@update:modelValue | [value: Date | Date[] | null] | Emits the updated date value when the user changes the selected date or range. |
DetailsDeclared type[value: Date | Date[] | null] Literal values
Sourcepackages/ui/src/components/calendar/Calendar.vue | ||
Slots
These slots are supported by the underlying v-calendar DatePicker and forwarded by Calendar for customizing the header and date cells:
| Slot | Scope | Description |
|---|---|---|
header-prev-button | — | Custom previous month navigation button (defaults to ChevronLeft icon) |
header-title | { title: string } | Custom header title (defaults to bold uppercase display) |
header-next-button | — | Custom next month navigation button (defaults to ChevronRight icon) |
day-content | { day: object, dayProps: object, dayEvents: object } | Custom date cell content |
Event Markers
Use the events prop to mark events on the calendar. Two display modes are supported.
Data Type
interface CalendarEvent {
date: Date | string // Event date
title: string // Event title
[key: string]: unknown // Additional custom fields
}When an event date is passed as a YYYY-MM-DD string, Calendar parses it as a local calendar date for that day instead of relying on native Date UTC/time-zone inference for date-only strings. Full datetime strings still use native Date / ISO datetime semantics; for cross-time-zone consistency, pass a Date object or a full ISO string with an explicit offset.
Default Mode
Dot indicators with Tooltip, ideal for calendars with fewer events:
<script setup>
import { Calendar } from 'brutx-ui-vue/calendar'
const events = [
{ date: '2025-07-15', title: 'Team Meeting' },
{ date: '2025-07-20', title: 'Product Launch' },
{ date: '2025-07-20', title: 'Code Review' },
]
</script>
<template>
<Calendar :events="events" />
</template>Card Mode
Adaptive-height cards with capsule badges, ideal for calendars with many events:
<script setup>
import { Calendar } from 'brutx-ui-vue/calendar'
const events = [
{ date: '2025-07-15', title: 'Team Meeting' },
{ date: '2025-07-20', title: 'Product Launch' },
{ date: '2025-07-20', title: 'Code Review' },
]
</script>
<template>
<Calendar :events="events" mode="card" />
</template>Custom Event Rendering
Use eventRenderer to customize how events are rendered:
<script setup>
import { Calendar } from 'brutx-ui-vue/calendar'
import { h } from 'vue'
const events = [
{ date: '2025-07-15', title: 'Team Meeting', color: 'red' },
{ date: '2025-07-20', title: 'Product Launch', color: 'blue' },
]
function renderEvent(event) {
return h('span', { style: { color: event.color } }, event.title)
}
</script>
<template>
<Calendar :events="events" :event-renderer="renderEvent" />
</template>Accessibility
- Keyboard Interaction: Supported via v-calendar's built-in support; use arrow keys to navigate between dates,
Enter/Spaceto select a date,Escapeto close the popup panel (if applicable) - ARIA Attributes: v-calendar automatically manages semantic attributes such as
role="grid"androle="gridcell"for the date grid - Focus Management: Navigation buttons can be focused via
Tabkey, and date cells support arrow key navigation