BootstrapVue Calendar 日历组件样式

BootstrapVue Calendar 日历组件样式设置方法包括设置主题、宽度、日期格式、边框间距等。

设置主题色

//'secondary', 'success', 'danger', 'warning', 'info'
  <b-calendar
    selected-variant="success"
    today-variant="info"
    nav-button-variant="primary"
  ></b-calendar>

例子

日历组件宽度

组件默认显示为 inline-block 宽度为270px,也可以设置为block或者直接设置width属性。
 <b-calendar block width="300px"></b-calendar>

设置顶部星期几的格式

<!--weekday-header-format支持long、short、narrow三种格式-->
<b-calendar
     weekday-header-format ="narrow" width="350px"
  ></b-calendar>

隐藏顶部选择日期区域

<b-calendar hide-header ></b-calendar>

显示下一个10年按钮

<b-calendar hide-header 
 show-decade-nav 
 label-prev-decade="上一个10年"
 label-next-decade="下一个10年"></b-calendar>

边框与内间距

<b-calendar class="border rounded p-2" ></b-calendar>

例子