Calendar

Voqealar, markerlar, moslashtiriladigan kataklar va locale qo'llab-quvvatlashi bilan to'liq o'lchamli inline taqvim.

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

Voqealarni taqvim kataklari ichida ko'rsating. Har bir voqea title, date va ixtiyoriy color ga ega. Voqealar rangli nuqtali kichik belgili bo'laklar sifatida ko'rsatiladi.

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>

Agar katakda max-events (standart qiymat 3) dan ko'proq voqealar bo'lsa, u "+N more" yorlig'ini ko'rsatadi.

Events with Click Handler

Foydalanuvchi harakatlariga javob berish uchun event-click va cell-click hodisalarini tinglang.

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

Muayyan sanalardagi rangli nuqtalar va kichik belgilar.

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

Qator balandligini cell-height orqali sozlang (px dagi raqam yoki CSS satri).

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

Muayyan sanalarni funksiya yordamida o'chiring (masalan, dam olish kunlari).

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

To'liq moslashtirilgan katak mazmuni uchun cell slotidan foydalaning. { date, day, events, markers, today, selected } ni qabul qiladi.

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

Butun sarlavhani header sloti bilan almashtiring. Navigatsiya funksiyalari va joriy holatni qabul qiladi.

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`	Tanlangan sana (v-model)
`mode`	`'month' \| 'year'`	`'month'`	Ko'rsatish rejimi
`firstDayOfWeek`	`number`	`0`	Haftaning birinchi kuni (0=Yak, 1=Dush)
`minDate`	`string \| Date \| null`	`null`	Tanlash mumkin bo'lgan eng erta sana
`maxDate`	`string \| Date \| null`	`null`	Tanlash mumkin bo'lgan eng kech sana
`disabledDate`	`(date: Date) => boolean`	—	Moslashtirilgan o'chirish funksiyasi
`markers`	`CalendarMarker[]`	`[]`	Sanalardagi nuqtalar/belgilar
`events`	`CalendarEvent[]`	`[]`	Kataklarda ko'rsatiladigan voqealar
`showWeekNumbers`	`boolean`	`false`	Hafta raqamlari ustunini ko'rsatish
`showToday`	`boolean`	`true`	"Today" tugmasini ko'rsatish
`showAdjacentMonths`	`boolean`	`true`	Qo'shni oy kunlarini ko'rsatish
`bordered`	`boolean`	`true`	Chegarani ko'rsatish
`readonly`	`boolean`	`false`	Tanlashni bloklash
`locale`	`string`	`'en-US'`	BCP 47 locale satri
`cellHeight`	`number \| string`	`100`	Qator balandligi (px yoki CSS)
`maxEvents`	`number`	`3`	"+N more" dan oldin katakdagi maksimal voqealar
`headerClass`	`string`	`''`	Sarlavha uchun moslashtirilgan klass
`cellClass`	`string \| (date: Date) => string`	`''`	Har bir katak uchun moslashtirilgan klass

Events

Event	Type	Description
`update:modelValue`	`(value)`	Tanlangan sana o'zgardi
`change`	`(date)`	Sana tanlandi
`panel-change`	`(date, mode)`	Navigatsiya o'zgardi
`cell-click`	`(date)`	Katak bosildi
`event-click`	`(event, date)`	Voqea bosildi

Slots

Slot	Props	Description
`header`	`{ year, month, monthName, prevMonth, nextMonth, prevYear, nextYear, goToday }`	Moslashtirilgan sarlavha
`cell`	`{ date, day, events, markers, today, selected }`	Moslashtirilgan katak mazmuni

CalendarEvent Interface

interface CalendarEvent {
  date: string | Date
  title: string
  color?: string
  id?: string | number
  [k: string]: any       // istalgan moslashtirilgan ma'lumotni qo'shing
}

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