v2.15.0

Calendar

A calendar tool for choosing individual dates, multiple dates, or date spans.
GitHub
Demo
Nuxt UI
Calendar avatarCalendar

Usage

Use the v-model directive to control the selected date.

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
1
2
3
4
5
6
7
8
9
10
11
12
Event date, April 2012
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar v-model="value" />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

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
1
2
3
4
5
6
7
8
9
10
11
12
Event date, April 2012
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const defaultValue = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar :default-value="defaultValue" />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const defaultValue = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar :default-value="defaultValue" />
</template>
This component uses the @internationalized/date package for locale-aware formatting. The date format is determined by the locale prop of the App component.
This component uses the @internationalized/date package for locale-aware formatting. The date format is determined by the locale prop of the App component.

Type 2.14+

Use the type prop to change what the calendar selects. Defaults to date.

When using date, click the heading to switch from the day view to a month then year view for quick navigation, then drill back down to pick a date.

Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Month picker, 2012
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar type="month" v-model="value" />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar type="month" v-model="value" />
</template>

Use type="year" to render a standalone year picker.

2010 - 2021
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
Year picker, 2010 - 2021
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar type="year" v-model="value" />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar type="year" v-model="value" />
</template>

Multiple

Use the multiple prop to allow multiple selections.

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
1
2
3
4
5
6
7
8
9
10
11
12
Event date, April 2012
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef([
  new CalendarDate(2012, 4, 4),
  new CalendarDate(2012, 4, 12),
  new CalendarDate(2012, 4, 20)
])
</script>

<template>
  <B24Calendar multiple v-model="value" />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const value = shallowRef([
  new CalendarDate(2012, 4, 4),
  new CalendarDate(2012, 4, 12),
  new CalendarDate(2012, 4, 20)
])
</script>

<template>
  <B24Calendar multiple v-model="value" />
</template>

Locale

Use the locale prop to change the locale of the calendar.

26
27
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
1
2
3
4
5
6
Event date, 2012年4月
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar v-model="value" locale="zh-CN" />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const value = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Calendar v-model="value" locale="zh-CN" />
</template>

Range

Use the range prop to select a range of dates.

Event date, April 2012
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
1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef({
  start: new CalendarDate(2012, 4, 3),
  end: new CalendarDate(2012, 4, 20)
})
</script>

<template>
  <B24Calendar range v-model="value" />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const value = shallowRef({
  start: new CalendarDate(2012, 4, 3),
  end: new CalendarDate(2012, 4, 20)
})
</script>

<template>
  <B24Calendar range v-model="value" />
</template>

The range prop also works with type="month" and type="year", letting you select a range of months or years.

Month picker, 2012
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const value = shallowRef({
  start: new CalendarDate(2012, 4, 3),
  end: new CalendarDate(2012, 4, 20)
})
</script>

<template>
  <B24Calendar type="month" range v-model="value" />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const value = shallowRef({
  start: new CalendarDate(2012, 4, 3),
  end: new CalendarDate(2012, 4, 20)
})
</script>

<template>
  <B24Calendar type="month" range v-model="value" />
</template>

Number Of Months

Use the numberOfMonths prop to change the number of months in the calendar.

27
28
29
30
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
1
2
3
4
5
6
7
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
1
2
3
4
5
6
7
8
9
10
11
12
29
30
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
1
2
3
4
5
6
7
8
9
Event date, October - December 2026
<template>
  <B24Calendar :number-of-months="3" />
</template>

Month Controls

Use the month-controls prop to show the month controls. Defaults to true.

27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar :month-controls="false" />
</template>

Use the prev-month and next-month props to override the month buttons.

27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar
    :prev-month="{
      color: 'air-primary'
    }"
    :next-month="{
      color: 'air-primary-alert'
    }"
  />
</template>

Year Controls

Use the year-controls prop to show the year controls. Defaults to true.

27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar :year-controls="false" />
</template>

Use the prev-year and next-year props to override the year buttons.

27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar
    :prev-year="{
      color: 'air-primary'
    }"
    :next-year="{
      color: 'air-primary'
    }"
  />
</template>

View Control 2.14+

Use the view-control prop to make the heading a button that switches between the day, month and year views. Defaults to true.

October 2026
27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar :view-control="false" />
</template>

Set the view-control prop to an object to override the heading button.

27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar
    :view-control="{
      color: 'air-primary'
    }"
  />
</template>

Years Per Page 2.15+

Use the years-per-page prop to change the number of years displayed in the year view. Defaults to 12.

2020 - 2039
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
Year picker, 2020 - 2039
<template>
  <B24Calendar type="year" :years-per-page="20" />
</template>

Fixed Weeks

Use the fixed-weeks prop to display the calendar with fixed weeks.

27
28
29
30
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
Event date, October 2026
<template>
  <B24Calendar :fixed-weeks="false" />
</template>

Week Numbers

Use the week-numbers prop to display week numbers in the calendar.

40
27
28
29
30
1
2
3
41
4
5
6
7
8
9
10
42
11
12
13
14
15
16
17
43
18
19
20
21
22
23
24
44
25
26
27
28
29
30
31
45
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar week-numbers />
</template>

Color

Use the color prop to change the color of the calendar.

Event date, April 2012
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
1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <B24Calendar color="air-primary-alert" />
</template>

Size

Use the size prop to change the size of the calendar.

27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar size="lg" />
</template>

Disabled

Use the disabled prop to disable the calendar.

27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<template>
  <B24Calendar disabled />
</template>

Examples

With chip events

Use the Chip component to add events to specific days.

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
1
2
3
4
5
6
7
8
9
10
11
12
Event date, April 2012
<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef(new CalendarDate(2012, 4, 12))

function getColorByDate(date: Date) {
  const isWeekend = date.getDay() % 6 == 0
  const isDayMeeting = date.getDay() % 3 == 0

  if (isWeekend) {
    return undefined
  }

  if (isDayMeeting) {
    return 'air-primary-alert'
  }

  return 'air-primary-success'
}
</script>

<template>
  <B24Calendar v-model="modelValue" size="lg">
    <template #day="{ day }">
      <B24Chip
        :show="!!getColorByDate(day.toDate('UTC'))"
        :color="getColorByDate(day.toDate('UTC'))"
        size="sm"
      >
        {{ day.day }}
      </B24Chip>
    </template>
  </B24Calendar>
</template>

With disabled dates

Use the is-date-disabled prop with a function to mark specific dates as disabled. When using type="month" or type="year", use the is-month-disabled or is-year-disabled prop instead.

Event date, April 2012
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
1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef({
  start: new CalendarDate(2012, 4, 12),
  end: new CalendarDate(2012, 4, 14)
})

const isDateDisabled = (date: DateValue) => {
  return date.day >= 15 && date.day <= 17
}
</script>

<template>
  <B24Calendar v-model="modelValue" :is-date-disabled="isDateDisabled" range />
</template>

With unavailable dates

Use the is-date-unavailable prop with a function to mark specific dates as unavailable. When using type="month" or type="year", use the is-month-unavailable or is-year-unavailable prop instead.

Event date, April 2012
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
1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef({
  start: new CalendarDate(2012, 4, 12),
  end: new CalendarDate(2012, 4, 14)
})

const isDateUnavailable = (date: DateValue) => {
  return date.day >= 15 && date.day <= 17
}
</script>

<template>
  <B24Calendar v-model="modelValue" :is-date-unavailable="isDateUnavailable" range />
</template>

With min/max dates

Use the min-value and max-value props to limit the dates.

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
1
2
3
4
5
6
7
8
9
10
11
12
Event date, April 2012
<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef(new CalendarDate(2012, 4, 12))
const minDate = new CalendarDate(2012, 4, 3)
const maxDate = new CalendarDate(2012, 4, 27)
</script>

<template>
  <B24Calendar v-model="modelValue" :min-value="minDate" :max-value="maxDate" />
</template>

With other calendar systems

You can use other calenders from @internationalized/date to implement a different calendar system.

24
25
26
27
28
29
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
1
2
3
4
5
6
Event date, Tishri 5781
<script lang="ts" setup>
import { shallowRef } from 'vue'
import { CalendarDate, HebrewCalendar } from '@internationalized/date'

const hebrewDate = shallowRef(new CalendarDate(new HebrewCalendar(), 5781, 1, 1))
</script>

<template>
  <B24Calendar v-model="hebrewDate" />
</template>
You can check all the available calendars on @internationalized/date docs.

With external controls

You can control the calendar with external controls by manipulating the date passed in the v-model.

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
1
2
3
4
5
6
7
8
9
10
11
12
Event date, April 2012
<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate } from '@internationalized/date'

const date = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <div class="flex flex-col gap-4">
    <B24Calendar v-model="date" :month-controls="false" :year-controls="false" />

    <div class="flex justify-between gap-4">
      <B24Button @click="date = date.subtract({ months: 1 })">
        Prev
      </B24Button>

      <B24Button @click="date = date.add({ months: 1 })">
        Next
      </B24Button>
    </div>
  </div>
</template>

With today's date

Use the today function from @internationalized/date with getLocalTimeZone to set the value to the current date.

27
28
29
30
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
1
2
3
4
5
6
7
Event date, October 2026
<script setup lang="ts">
import { getLocalTimeZone, today } from '@internationalized/date'

const date = shallowRef(today(getLocalTimeZone()))
</script>

<template>
  <div class="flex flex-col gap-4">
    <B24Calendar v-model="date" />

    <B24Button color="air-primary" class="justify-center" @click="date = today(getLocalTimeZone())">
      Today
    </B24Button>
  </div>
</template>

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

const date = shallowRef(today(getLocalTimeZone()))
</script>

<template>
  <div class="flex flex-col gap-4">
    <B24Calendar v-model="date" />

    <B24Button color="air-primary" class="justify-center" @click="date = today(getLocalTimeZone())">
      Today
    </B24Button>
  </div>
</template>

As a date picker

Use a Button and a Popover component to create a date picker.

<script setup lang="ts">
import { shallowRef } from 'vue'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'

const df = new DateFormatter('en-US', {
  dateStyle: 'medium'
})

const modelValue = shallowRef(new CalendarDate(2012, 4, 12))
</script>

<template>
  <B24Popover>
    <B24Button :icon="Calendar1Icon">
      {{ modelValue ? df.format(modelValue.toDate(getLocalTimeZone())) : 'Select a date' }}
    </B24Button>

    <template #content>
      <B24Calendar v-model="modelValue" class="p-2" />
    </template>
  </B24Popover>
</template>

As a date range picker

Use a Button and a Popover component to create a date range picker with preset ranges.

<script setup lang="ts">
import { shallowRef } from 'vue'
import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'

const { screen } = useDevice()
const df = new DateFormatter('en-US', { dateStyle: 'medium' })
const tz = getLocalTimeZone()

const ranges = [
  { label: 'Last 7 days', days: 7 },
  { label: 'Last 14 days', days: 14 },
  { label: 'Last 30 days', days: 30 },
  { label: 'Last 3 months', months: 3 },
  { label: 'Last 6 months', months: 6 },
  { label: 'Last year', years: 1 }
]

const initialEnd = today(tz)
const modelValue = shallowRef({
  start: initialEnd.subtract({ days: 14 }),
  end: initialEnd
})

const label = computed(() => {
  const { start, end } = modelValue.value
  if (!start) return 'Pick a date'
  if (!end) return df.format(start.toDate(tz))
  return `${df.format(start.toDate(tz))} - ${df.format(end.toDate(tz))}`
})

function computeStart(range: typeof ranges[number]) {
  const end = today(tz)
  return { start: end.subtract({ days: range.days, months: range.months, years: range.years }), end }
}

function isRangeSelected(range: typeof ranges[number]) {
  if (!modelValue.value?.start || !modelValue.value?.end) return false
  const { start, end } = computeStart(range)
  return modelValue.value.start.compare(start) === 0 && modelValue.value.end.compare(end) === 0
}

function selectRange(range: typeof ranges[number]) {
  modelValue.value = computeStart(range)
}
</script>

<template>
  <B24Popover :content="{ align: 'center' }">
    <B24Button :icon="Calendar1Icon">
      {{ label }}
    </B24Button>

    <template #content>
      <div class="flex items-stretch divide-x divide-accented">
        <div class="hidden sm:flex flex-col justify-center py-2">
          <B24Button
            v-for="(range, index) in ranges"
            :key="index"
            :label="range.label"
            class="rounded-none px-4"
            :class="[isRangeSelected(range) ? 'bg-elevated' : 'hover:bg-elevated/50']"
            truncate
            @click="selectRange(range)"
          />
        </div>

        <B24Calendar v-model="modelValue" class="p-2" :number-of-months="screen.isDesktop ? 2 : 1" range />
      </div>
    </template>
  </B24Popover>
</template>

<script setup lang="ts">
import { shallowRef, computed } from 'vue'
import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'

const { screen } = useDevice()
const df = new DateFormatter('en-US', { dateStyle: 'medium' })
const tz = getLocalTimeZone()

const ranges = [
  { label: 'Last 7 days', days: 7 },
  { label: 'Last 14 days', days: 14 },
  { label: 'Last 30 days', days: 30 },
  { label: 'Last 3 months', months: 3 },
  { label: 'Last 6 months', months: 6 },
  { label: 'Last year', years: 1 }
]

const initialEnd = today(tz)
const modelValue = shallowRef({
  start: initialEnd.subtract({ days: 14 }),
  end: initialEnd
})

const label = computed(() => {
  const { start, end } = modelValue.value
  if (!start) return 'Pick a date'
  if (!end) return df.format(start.toDate(tz))
  return `${df.format(start.toDate(tz))} - ${df.format(end.toDate(tz))}`
})

function computeStart(range: typeof ranges[number]) {
  const end = today(tz)
  return { start: end.subtract({ days: range.days, months: range.months, years: range.years }), end }
}

function isRangeSelected(range: typeof ranges[number]) {
  if (!modelValue.value?.start || !modelValue.value?.end) return false
  const { start, end } = computeStart(range)
  return modelValue.value.start.compare(start) === 0 && modelValue.value.end.compare(end) === 0
}

function selectRange(range: typeof ranges[number]) {
  modelValue.value = computeStart(range)
}
</script>

<template>
  <B24Popover :content="{ align: 'center' }">
    <B24Button :icon="Calendar1Icon">
      {{ label }}
    </B24Button>

    <template #content>
      <div class="flex items-stretch divide-x divide-accented">
        <div class="hidden sm:flex flex-col justify-center py-2">
          <B24Button
            v-for="(range, index) in ranges"
            :key="index"
            :label="range.label"
            class="rounded-none px-4"
            :class="[isRangeSelected(range) ? 'bg-elevated' : 'hover:bg-elevated/50']"
            truncate
            @click="selectRange(range)"
          />
        </div>

        <B24Calendar v-model="modelValue" class="p-2" :number-of-months="screen.isDesktop ? 2 : 1" range />
      </div>
    </template>
  </B24Popover>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

type'date' "month" | "year" | "date"

The type of picker.

  • date renders a day calendar whose heading can switch to a month then year view.
  • month renders a standalone month picker.
  • year renders a standalone year picker.
nextYearIconicons.chevronDoubleRightIconComponent

The icon to use for the next year control.

nextYear Omit<ButtonProps, LinkPropsKeys>

Configure the next year button. { color: 'air-tertiary' }

nextMonthIconicons.chevronRightIconComponent

The icon to use for the next month control.

nextMonth Omit<ButtonProps, LinkPropsKeys>

Configure the next month button. { color: 'air-tertiary' }

prevYearIconicons.chevronDoubleLeftIconComponent

The icon to use for the previous year control.

prevYear Omit<ButtonProps, LinkPropsKeys>

Configure the prev year button. { color: 'air-tertiary' }

prevMonthIconicons.chevronLeftIconComponent

The icon to use for the previous month control.

prevMonth Omit<ButtonProps, LinkPropsKeys>

Configure the prev month button. { color: 'air-tertiary' }

viewControltrueboolean | Omit<ButtonProps, LinkPropsKeys>

Whether to make the heading a button that switches between the day, month and year views. Has no effect when type is year. Can be an object to override the button props. { color: 'air-tertiary', block: true }

color'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"
size'md' "xs" | "sm" | "md" | "lg"
range R

Whether or not a range of dates can be selected

multiple M

Whether or not multiple dates can be selected

monthControlstrueboolean

Show month controls

yearControlstrueboolean

Show year controls

defaultValueCalendarDate | CalendarDateTime | ZonedDateTime | DateRange | DateValue[]
modelValuenull | CalendarDate | CalendarDateTime | ZonedDateTime | DateRange | DateValue[]
weekNumbersboolean
defaultPlaceholderCalendarDate | CalendarDateTime | ZonedDateTime
placeholderCalendarDate | CalendarDateTime | ZonedDateTime
allowNonContiguousRangesboolean

When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.

pagedNavigationboolean

This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month

preventDeselectboolean

Whether or not to prevent the user from deselecting a date without selecting another date first

maximumDays number

The maximum number of days that can be selected in a range

weekStartsOn 0 | 1 | 2 | 3 | 4 | 5 | 6

The day of the week to start the calendar on

weekdayFormat "narrow" | "short" | "long"

The format to use for the weekday strings provided via the weekdays slot prop

fixedWeekstrueboolean

Whether or not to always display 6 weeks in the calendar

maxValueCalendarDate | CalendarDateTime | ZonedDateTime
minValueCalendarDate | CalendarDateTime | ZonedDateTime
locale string

The locale to use for formatting dates

numberOfMonths number

The number of months to display at once

disabledboolean

Whether or not the calendar is disabled

readonlyboolean

Whether or not the calendar is readonly

initialFocusboolean

If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted

isDateDisabled (date: DateValue): boolean

A function that returns whether or not a date is disabled

isDateUnavailable (date: DateValue): boolean

A function that returns whether or not a date is unavailable

isDateHighlightable (date: DateValue): boolean

A function that returns whether or not a date is hightable

nextPage (placeholder: DateValue): DateValue

A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.

prevPage (placeholder: DateValue): DateValue

A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.

disableDaysOutsideCurrentViewboolean

Whether or not to disable days outside the current view.

fixedDate "start" | "end"

Which part of the range should be fixed

isMonthDisabled (date: DateValue): boolean

A function that returns whether or not a month is disabled

isMonthUnavailable (date: DateValue): boolean

A function that returns whether or not a month is unavailable

isYearDisabled (date: DateValue): boolean

A function that returns whether or not a year is disabled

isYearUnavailable (date: DateValue): boolean

A function that returns whether or not a year is unavailable

yearsPerPage number

Number of years to display per page

b24ui { root?: SlotClass; header?: SlotClass; body?: SlotClass; heading?: SlotClass; headingLabel?: SlotClass; grid?: SlotClass; gridRow?: SlotClass; gridWeekDaysRow?: SlotClass; gridBody?: SlotClass; headCell?: SlotClass; headCellWeek?: SlotClass; cell?: SlotClass; cellTrigger?: SlotClass; cellWeek?: SlotClass; }

Slots

Slot Type
heading{ value: string; view: CalendarView; date: DateValue; setView: (view: CalendarView) => void; setPlaceholder: (date: DateValue) => void; }
dayPick<CalendarCellTriggerProps, "day">
week-day{ day: string; }
month-cell{ month: DateValue; selected: boolean; disabled: boolean; }
year-cell{ year: DateValue; selected: boolean; disabled: boolean; }

Emits

Event Type
update:modelValue[value: CalendarModelValue<R, M>]
update:placeholder[date: DateValue]
update:validModelValue[date: DateRange]
update:startValue[date: DateValue | undefined]

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/calendar.ts
export default {
  slots: {
    root: 'font-[family-name:var(--ui-font-family-primary)]',
    header: 'flex items-center justify-between',
    body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
    heading: 'flex-1 min-w-0 text-center',
    headingLabel: 'text-legend font-(--ui-font-weight-semi-bold) block truncate p-1.5',
    grid: 'w-full border-collapse select-none space-y-1 focus:outline-none',
    gridRow: 'grid',
    gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
    gridBody: 'grid',
    headCell: 'font-(--ui-font-weight-normal) text-(--ui-color-design-plain-na-content-secondary)',
    headCellWeek: 'text-(--ui-color-design-plain-na-content-secondary)',
    cell: 'relative text-center cursor-pointer aria-disabled:cursor-not-allowed',
    cellTrigger: 'm-0 sm:m-0.5 relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none text-label data-[disabled]:text-(--ui-color-design-plain-na-content-secondary) data-disabled:opacity-30 data-unavailable:text-(--ui-color-design-plain-na-content-secondary) data-selected:text-(--b24ui-color) focus-visible:ring-(--b24ui-background-hover) data-selected:focus-visible:ring-(--b24ui-background-hover) data-selected:bg-(--b24ui-background) data-today:not-data-selected:text-(--b24ui-background) data-highlighted:bg-(--b24ui-background) data-highlighted:text-(--b24ui-color) hover:not-data-[disabled]:not-data-[selected]:bg-(--b24ui-background) hover:not-data-[disabled]:not-data-[selected]:text-(--b24ui-color) data-unavailable:line-through data-unavailable:pointer-events-none data-today:font-(--ui-font-weight-semi-bold) transition',
    cellWeek: 'relative text-center text-(--ui-color-design-plain-na-content-secondary)'
  },
  variants: {
    color: {
      'air-primary': {
        root: 'style-filled'
      },
      'air-primary-success': {
        root: 'style-filled-success'
      },
      'air-primary-alert': {
        root: 'style-filled-alert'
      },
      'air-primary-copilot': {
        root: 'style-filled-copilot'
      },
      'air-primary-warning': {
        root: 'style-filled-warning'
      },
      default: {
        root: 'style-old-default'
      },
      danger: {
        root: 'style-old-danger'
      },
      success: {
        root: 'style-old-success'
      },
      warning: {
        root: 'style-old-warning'
      },
      primary: {
        root: 'style-old-primary'
      },
      secondary: {
        root: 'style-old-secondary'
      },
      collab: {
        root: 'style-old-collab'
      },
      ai: {
        root: 'style-old-ai'
      }
    },
    size: {
      xs: {
        headingLabel: 'text-(length:--ui-font-size-md)',
        cell: 'text-(length:--ui-font-size-sm)',
        cellWeek: 'text-(length:--ui-font-size-4xs)',
        headCell: 'text-(length:--ui-font-size-4xs)',
        headCellWeek: 'text-(length:--ui-font-size-4xs)',
        body: 'space-y-2 pt-2'
      },
      sm: {
        headingLabel: 'text-(length:--ui-font-size-md)',
        headCell: 'text-(length:--ui-font-size-3xs)',
        headCellWeek: 'text-(length:--ui-font-size-3xs)',
        cellWeek: 'text-(length:--ui-font-size-3xs)',
        cell: 'text-(length:--ui-font-size-sm)'
      },
      md: {
        headingLabel: 'text-(length:--ui-font-size-lg)',
        headCell: 'text-(length:--ui-font-size-xs)',
        headCellWeek: 'text-(length:--ui-font-size-xs)',
        cellWeek: 'text-(length:--ui-font-size-xs)',
        cell: 'text-(length:--ui-font-size-md)'
      },
      lg: {
        headingLabel: 'text-(length:--ui-font-size-2xl)',
        headCell: 'text-(length:--ui-font-size-xs)',
        headCellWeek: 'text-(length:--ui-font-size-xs)',
        cellWeek: 'text-(length:--ui-font-size-xs)',
        cell: 'text-(length:--ui-font-size-lg)'
      }
    },
    view: {
      day: {
        gridRow: 'grid-cols-7 place-items-center',
        cellTrigger: 'rounded-full data-outside-view:text-(--ui-color-design-plain-na-content-secondary)'
      },
      month: {
        gridRow: 'grid-cols-4',
        cellTrigger: 'rounded-md'
      },
      year: {
        gridRow: 'grid-cols-4',
        cellTrigger: 'rounded-md'
      }
    },
    weekNumbers: {
      true: ''
    }
  },
  compoundVariants: [
    {
      size: 'xs',
      view: 'day',
      class: {
        cellTrigger: 'size-11 sm:size-6'
      }
    },
    {
      size: 'sm',
      view: 'day',
      class: {
        cellTrigger: 'size-11 sm:size-7'
      }
    },
    {
      size: 'md',
      view: 'day',
      class: {
        cellTrigger: 'size-11 sm:size-8'
      }
    },
    {
      size: 'lg',
      view: 'day',
      class: {
        cellTrigger: 'size-11 sm:size-9'
      }
    },
    {
      size: 'xs',
      view: [
        'month',
        'year'
      ],
      class: {
        cellTrigger: 'h-11 sm:h-6 px-2'
      }
    },
    {
      size: 'sm',
      view: [
        'month',
        'year'
      ],
      class: {
        cellTrigger: 'h-11 sm:h-7 px-2'
      }
    },
    {
      size: 'md',
      view: [
        'month',
        'year'
      ],
      class: {
        cellTrigger: 'h-11 sm:h-8 px-3'
      }
    },
    {
      size: 'lg',
      view: [
        'month',
        'year'
      ],
      class: {
        cellTrigger: 'h-11 sm:h-9 px-4'
      }
    },
    {
      view: 'day',
      weekNumbers: true,
      class: {
        gridRow: 'grid-cols-8',
        gridWeekDaysRow: 'grid-cols-8 [&>*:first-child]:col-start-2'
      }
    }
  ],
  defaultVariants: {
    size: 'md',
    color: 'air-primary',
    view: 'day'
  }
}

Button

A button capable of linking or performing an action.

Card

Render the content within a card component comprising a header, body, and footer section.