BreezeUI
  • English

    • Calendar

    A calendar component that supports date selection, range selection, and event markers.

    Component Features

    • 📅 Multiple Selection Modes: Supports single date, range selection, and range with time selection.
    • 🏷️ Event Markers: Supports event markers on dates.
    • 📆 Dual Display: Supports month and year view modes.
    • 🛠️ Toolbar: Supports custom toolbar with navigation and today button.
    • 🌍 Internationalization: Supports i18n for language-specific date formatting.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    Display a basic single-date calendar. Note: The component uses @internationalized/date to handle dates.

    <script setup lang="ts">
import { ref } from 'vue'
import { today, getLocalTimeZone } from '@internationalized/date'
import { BrCalendar } from '@breezeui/vue'

const tz = getLocalTimeZone()
const date = ref(today(tz))
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <BrCalendar v-model="date" />
    <p class="text-sm text-muted-foreground">
      Selected: {{ date?.toString() }}
    </p>
  </div>
</template>

    Range Selection & Events

    Set mode="range" to enable date range selection. You can also use the events prop to mark specific dates.

    <script setup lang="ts">
import { ref } from 'vue'
import { today, getLocalTimeZone } from '@internationalized/date'
import { BrCalendar } from '@breezeui/vue'

const tz = getLocalTimeZone()
const now = today(tz)

const range = ref({
  start: now,
  end: now.add({ days: 7 })
})
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <BrCalendar 
      v-model="range" 
      mode="range" 
    />
    <div class="text-sm text-muted-foreground flex gap-4">
      <p>Start: {{ range?.start?.toString() }}</p>
      <p>End: {{ range?.end?.toString() }}</p>
    </div>
  </div>
</template>

    Popover Mode

    Combine with BrCalendarPopover to display the calendar in a popover when triggered.

    <script setup lang="ts">
import { ref } from 'vue'
import { today, getLocalTimeZone } from '@internationalized/date'
import { BrCalendar, BrCalendarPopover, BrButton } from '@breezeui/vue'

const tz = getLocalTimeZone()
const date = ref(today(tz))
</script>

<template>
  <div class="flex items-center gap-4">
    <span class="text-sm font-medium">Select Date:</span>
    <BrCalendarPopover>
      <template #trigger>
        <BrButton variant="outline" class="w-[240px] justify-start text-left font-normal">
          {{ date ? date.toString() : 'Pick a date' }}
        </BrButton>
      </template>
      <BrCalendar v-model="date" display-mode="popover" />
    </BrCalendarPopover>
  </div>
</template>

    API

    BrCalendar Props

    NameTypeDefaultDescription
    modelValueDateValue | DateValue[] | { start: DateValue, end: DateValue }-The selected date(s)
    mode'single' | 'multiple' | 'range''single'Selection mode
    eventsEventMarker[][]Event markers for specific dates
    displayMode'inline' | 'popover''inline'Display mode, inline or popover
    weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 60Start day of the week (0 for Sunday)
    showToolbarbooleantrueWhether to show the header toolbar

    EventMarker Type

    PropertyTypeDescription
    datestring | Date | DateValueTarget date
    type'dot' | 'badge' | 'text'Marker type
    colorstringMarker color (supports CSS variables)
    labelstringHover tooltip text