Calendar

Полноразмерный встраиваемый календарь с событиями, маркерами, настраиваемыми ячейками и поддержкой локалей.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

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

Отображение событий внутри ячеек календаря. У каждого события есть title, date и опциональный color. События выводятся в виде небольших полосок с подписями и цветными точками.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Team standup

Design review

Sprint planning

Release v2.0

Deploy to prod

QA testing

+1 more

Demo day

Retrospective

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>

Когда в ячейке событий больше, чем задано в max-events (по умолчанию 3), отображается подпись "+N more".

Events with Click Handler

Слушайте event-click и cell-click, чтобы реагировать на действия пользователя.

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

Цветные точки и небольшие бейджи на определённых датах.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

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

Настраивайте высоту строк через cell-height (число в px или строка CSS).

Sun

Mon

Tue

Wed

Thu

Fri

Sat

vue

<template>
  <VxCalendar :cell-height="60" />    <!-- compact -->
  <VxCalendar :cell-height="120" />   <!-- spacious -->
  <VxCalendar cell-height="15vh" />   <!-- responsive -->
</template>

Week Numbers

Sun

Mon

Tue

Wed

Thu

Fri

Sat

vue

<template>
  <VxCalendar show-week-numbers />
</template>

Min / Max Date Range

Sun

Mon

Tue

Wed

Thu

Fri

Sat

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

Отключайте определённые даты с помощью функции (например, выходные).

Sun

Mon

Tue

Wed

Thu

Fri

Sat

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

Используйте слот cell для полностью кастомного содержимого ячейки. Получает { date, day, events, markers, today, selected }.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Deadline

Now

Payday

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

Замените весь заголовок через слот header. Получает функции навигации и текущее состояние.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

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

vue

<template>
  <VxCalendar mode="year" />
</template>

Hide Adjacent Months

Sun

Mon

Tue

Wed

Thu

Fri

Sat

vue

<template>
  <VxCalendar :show-adjacent-months="false" />
</template>

Locale

dim.

lun.

mar.

mer.

jeu.

ven.

sam.

日

月

火

水

木

金

土

vue

<template>
  <VxCalendar locale="fr-FR" />
  <VxCalendar locale="ja-JP" />
  <VxCalendar locale="de-DE" />
</template>

Readonly

Sun

Mon

Tue

Wed

Thu

Fri

Sat

vue

<template>
  <VxCalendar readonly />
</template>

Props

Prop	Type	Default	Description
`modelValue`	`string \| Date \| number \| null`	`null`	Выбранная дата (v-model)
`mode`	`'month' \| 'year'`	`'month'`	Режим отображения
`firstDayOfWeek`	`number`	`0`	Первый день недели (0=вс, 1=пн)
`minDate`	`string \| Date \| null`	`null`	Самая ранняя доступная дата
`maxDate`	`string \| Date \| null`	`null`	Самая поздняя доступная дата
`disabledDate`	`(date: Date) => boolean`	—	Пользовательская функция блокировки
`markers`	`CalendarMarker[]`	`[]`	Точки/бейджи на датах
`events`	`CalendarEvent[]`	`[]`	События, отображаемые в ячейках
`showWeekNumbers`	`boolean`	`false`	Показывать столбец номеров недель
`showToday`	`boolean`	`true`	Показывать кнопку "Today"
`showAdjacentMonths`	`boolean`	`true`	Показывать дни соседних месяцев
`bordered`	`boolean`	`true`	Показывать рамку
`readonly`	`boolean`	`false`	Запретить выбор
`locale`	`string`	`'en-US'`	Строка локали BCP 47
`cellHeight`	`number \| string`	`100`	Высота строки (px или CSS)
`maxEvents`	`number`	`3`	Максимум событий в ячейке до "+N more"
`headerClass`	`string`	`''`	Кастомный класс для заголовка
`cellClass`	`string \| (date: Date) => string`	`''`	Кастомный класс для ячейки

Events

Event	Type	Description
`update:modelValue`	`(value)`	Изменена выбранная дата
`change`	`(date)`	Дата выбрана
`panel-change`	`(date, mode)`	Изменена навигация
`cell-click`	`(date)`	Клик по ячейке
`event-click`	`(event, date)`	Клик по событию

Slots

Slot	Props	Description
`header`	`{ year, month, monthName, prevMonth, nextMonth, prevYear, nextYear, goToday }`	Кастомный заголовок
`cell`	`{ date, day, events, markers, today, selected }`	Кастомное содержимое ячейки

CalendarEvent Interface

interface CalendarEvent {
  date: string | Date
  title: string
  color?: string
  id?: string | number
  [k: string]: any       // добавьте любые пользовательские данные
}

CalendarMarker Interface

interface CalendarMarker {
  date: string | Date
  type?: 'dot' | 'badge'
  color?: string
  content?: string
}

Calendar ​

Events ​

Events with Click Handler ​

Markers ​

Cell Height ​

Week Numbers ​

Min / Max Date Range ​

Disabled Dates ​

Custom Cell Slot ​

Custom Header Slot ​

Year Mode ​

Hide Adjacent Months ​

Locale ​

Readonly ​

Props ​

Events ​

Slots ​

CalendarEvent Interface ​

CalendarMarker Interface ​

Calendar

Events

Events with Click Handler

Markers

Cell Height

Week Numbers

Min / Max Date Range

Disabled Dates

Custom Cell Slot

Custom Header Slot

Year Mode

Hide Adjacent Months

Locale

Readonly

Props

Events

Slots

CalendarEvent Interface

CalendarMarker Interface