v2.1.8
/
Use our Nuxt starter

Calendar

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

Usage

Use the v-model directive to control the selected 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
Event Date, April 2012
{
  "wait": "Loading client-side content..."
}

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

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
Event Date, April 2012
{
  "wait": "Loading client-side content..."
}
This component relies on the @internationalized/date package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.

Multiple

Use the multiple prop to allow multiple selections.

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
Event Date, April 2012
{
  "wait": "Loading client-side content..."
}

Locale

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

2012年4月
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月
{
  "wait": "Loading client-side content..."
}

Range

Use the range prop to select a range of dates.

Event Date, April 2012
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
{
  "wait": "Loading client-side content..."
}

Color

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

November 2025
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, November 2025
{
  "wait": "Loading client-side content..."
}

Size

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

November 2025
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, November 2025
{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the calendar.

November 2025
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, November 2025
{
  "wait": "Loading client-side content..."
}

Number Of Months

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

November 2025 - January 2026
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
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
10
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
1
2
3
4
5
6
7
Event Date, November 2025 - January 2026
{
  "wait": "Loading client-side content..."
}

Month Controls

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

November 2025
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, November 2025
{
  "wait": "Loading client-side content..."
}

Year Controls

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

November 2025
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, November 2025
{
  "wait": "Loading client-side content..."
}

Fixed Weeks

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

November 2025
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, November 2025
{
  "wait": "Loading client-side content..."
}

Examples

With chip events

Use the Chip component to add events to specific days.

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
Event Date, April 2012
{
  "wait": "Loading client-side content..."
}

With disabled dates

Use the is-date-disabled prop with a function to mark specific dates as disabled.

Event Date, April 2012
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
{
  "wait": "Loading client-side content..."
}

With unavailable dates

Use the is-date-unavailable prop with a function to mark specific dates as unavailable.

Event Date, April 2012
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
{
  "wait": "Loading client-side content..."
}

With min/max dates

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

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
Event Date, April 2012
{
  "wait": "Loading client-side content..."
}

With other calendar systems

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

Tishri 5781
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
{
  "wait": "Loading client-side content..."
}
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.

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
Event Date, April 2012
{
  "wait": "Loading client-side content..."
}

As a DatePicker

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

{
  "wait": "Loading client-side content..."
}

As a DateRangePicker

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

{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

nextYearIconicons.chevronDoubleRightIconComponent

The icon to use for the next year control.

nextYear ButtonProps

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

nextMonthIconicons.chevronRightIconComponent

The icon to use for the next month control.

nextMonth ButtonProps

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

prevYearIconicons.chevronDoubleLeftIconComponent

The icon to use for the previous year control.

prevYear ButtonProps

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

prevMonthIconicons.chevronLeftIconComponent

The icon to use for the previous month control.

prevMonth ButtonProps

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

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

Whether a range of dates can be selected

multipleboolean

Whether multiple dates can be selected

monthControlstrueboolean

Show month controls

yearControlsfalseboolean

Show year controls

defaultValue CalendarDate | CalendarDateTime | ZonedDateTime | DateRange | DateValue[]
modelValue null | CalendarDate | CalendarDateTime | ZonedDateTime | DateRange | DateValue[]
defaultPlaceholder CalendarDate | CalendarDateTime | ZonedDateTime

The default placeholder date

placeholder CalendarDate | CalendarDateTime | ZonedDateTime

The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view

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 | 4 | 3 | 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

maxValue CalendarDate | CalendarDateTime | ZonedDateTime

The maximum date that can be selected

minValue CalendarDate | CalendarDateTime | ZonedDateTime

The minimum date that can be selected

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

b24ui { root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; heading?: ClassNameValue; grid?: ClassNameValue; gridRow?: ClassNameValue; gridWeekDaysRow?: ClassNameValue; gridBody?: ClassNameValue; headCell?: ClassNameValue; cell?: ClassNameValue; cellTrigger?: ClassNameValue; }

Slots

Slot Type
heading{ value: string; }
dayPick<CalendarCellTriggerProps, "day">
week-day{ day: string; }

Emits

Event Type
update:modelValue[date: DateValue | DateRange | DateValue[] | null | undefined]
update:placeholder[date: DateValue] & [date: DateValue]
update:validModelValue[date: DateRange]
update:startValue[date: DateValue | undefined]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    calendar: {
      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: 'mx-auto text-center font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color) truncate',
        grid: 'w-full border-collapse select-none space-y-1 focus:outline-none',
        gridRow: 'grid grid-cols-7 place-items-center',
        gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
        gridBody: 'grid',
        headCell: 'font-(--ui-font-weight-normal) text-(--ui-color-design-plain-na-content)',
        cell: 'relative text-center cursor-pointer aria-disabled:cursor-not-allowed',
        cellTrigger: 'm-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none text-(--b24ui-typography-label-color) data-disabled:text-(--ui-color-design-plain-na-content-secondary) data-unavailable:text-(--ui-color-design-plain-na-content-secondary) data-outside-view:text-(--ui-color-design-plain-na-content-secondary) data-[selected]:text-(--b24ui-color) 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'
      },
      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: {
            heading: 'text-(length:--ui-font-size-md)',
            cell: 'text-(length:--ui-font-size-sm)',
            headCell: 'text-[10px]',
            cellTrigger: 'size-[28px]',
            body: 'space-y-2 pt-2'
          },
          sm: {
            heading: 'text-(length:--ui-font-size-md)',
            headCell: 'text-(length:--ui-font-size-sm)',
            cell: 'text-(length:--ui-font-size-sm)',
            cellTrigger: 'size-[28px]'
          },
          md: {
            heading: 'text-(length:--ui-font-size-lg)',
            headCell: 'text-(length:--ui-font-size-md)',
            cell: 'text-(length:--ui-font-size-md)',
            cellTrigger: 'size-[32px]'
          },
          lg: {
            heading: 'text-(length:--ui-font-size-2xl)',
            headCell: 'text-(length:--ui-font-size-lg)',
            cell: 'text-(length:--ui-font-size-lg)',
            cellTrigger: 'size-[36px] text-(length:--ui-font-size-lg)'
          }
        }
      },
      defaultVariants: {
        size: 'md',
        color: 'air-primary'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        calendar: {
          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: 'mx-auto text-center font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color) truncate',
            grid: 'w-full border-collapse select-none space-y-1 focus:outline-none',
            gridRow: 'grid grid-cols-7 place-items-center',
            gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
            gridBody: 'grid',
            headCell: 'font-(--ui-font-weight-normal) text-(--ui-color-design-plain-na-content)',
            cell: 'relative text-center cursor-pointer aria-disabled:cursor-not-allowed',
            cellTrigger: 'm-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none text-(--b24ui-typography-label-color) data-disabled:text-(--ui-color-design-plain-na-content-secondary) data-unavailable:text-(--ui-color-design-plain-na-content-secondary) data-outside-view:text-(--ui-color-design-plain-na-content-secondary) data-[selected]:text-(--b24ui-color) 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'
          },
          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: {
                heading: 'text-(length:--ui-font-size-md)',
                cell: 'text-(length:--ui-font-size-sm)',
                headCell: 'text-[10px]',
                cellTrigger: 'size-[28px]',
                body: 'space-y-2 pt-2'
              },
              sm: {
                heading: 'text-(length:--ui-font-size-md)',
                headCell: 'text-(length:--ui-font-size-sm)',
                cell: 'text-(length:--ui-font-size-sm)',
                cellTrigger: 'size-[28px]'
              },
              md: {
                heading: 'text-(length:--ui-font-size-lg)',
                headCell: 'text-(length:--ui-font-size-md)',
                cell: 'text-(length:--ui-font-size-md)',
                cellTrigger: 'size-[32px]'
              },
              lg: {
                heading: 'text-(length:--ui-font-size-2xl)',
                headCell: 'text-(length:--ui-font-size-lg)',
                cell: 'text-(length:--ui-font-size-lg)',
                cellTrigger: 'size-[36px] text-(length:--ui-font-size-lg)'
              }
            }
          },
          defaultVariants: {
            size: 'md',
            color: 'air-primary'
          }
        }
      }
    })
  ]
})

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.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24