calendarcomponent Calendar

Basic Usage

A simple calendar component for decorating pages

2026年 5月

• 一
• 二
• 三
• 四
• 五
• 六
• 日

• 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

<template>
  <b-calendar></b-calendar>
</template>

miniShow

A simple calendar component for decorating pages

2026年 5月

• 一
• 二
• 三
• 四
• 五
• 六
• 日

• 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

2026年 5月

• 一
• 二
• 三
• 四
• 五
• 六
• 日

• 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

<template>
  <div flex>
    <div style="width: 300px">
      <b-calendar mini></b-calendar>
    </div>
    <div style="width: 300px">
      <b-calendar
        mini
        :body-style="{ border: 'none' }"
        :day-style="{ border: 'none', borderRadius: '4px' }"
      ></b-calendar>
    </div>
  </div>
</template>

Props

Parameter	Description	Type	Options	Default
grid-height	Date cell height, default 80 if not set	String	—	80px
text-align	Date text alignment	String	left center right	left
mini	Mini mode	Boolean	—	—
body-style	Date table body style	Object	—	—
day-style	Per-day style	Object	—	—

Events

Event Name	Description	Return Value
prev	Previous month button event	—
next	Next month button event	—
today	Today button event	—
selected	Event when a day is selected	day