CataUiCalendar
A calendar component built on top of v-calendar library with custom styling and loading state support.
S
M
T
W
T
F
S
28
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
Examples
Basic Calendar
A simple calendar with custom day content and responsive styling:
<CataUiCalendar>
<template v-slot:day-content="{ day }">
{{ day.day }}
</template>
</CataUiCalendar>
In the example the following CSS has been added to customizes the calendar for responsive behavior by removing the default minimum width constraint and ensuring day cells maintain consistent square proportions with proper padding:
:deep(.cat-ui-calendar .vc-container) {
min-width: 0;
}
:deep(.cat-ui-calendar .vc-container .vc-day) {
aspect-ratio: 1 / 1;
padding: 4px;
}
Props
| Prop | Description | Type | Default | Required | Options |
|---|---|---|---|---|---|
| loading | Shows a loading spinner overlay when true, dims the calendar content | Boolean | false | false |
Slots
| Slot | Description | Props |
|---|---|---|
| day-content | Customize the content displayed for each day | attributes, day |
Inherited Attributes
This component inherits all props and events from the v-calendar library. Common props include attributes, min-date, max-date, disabled-dates, and locale.