vi-calendar

使用

npm i vi-calendar --save

使用微信开发者工具构建NPM并使用NPM模块

"usingComponents": {
  "ViCalendar": "vi-calendar",
}

示例

Default

<template>
  <ViCalendar></ViCalendar>
</template>

Selected Dates

<template>
  <ViCalendar selectedList="{{[12,15,6,8,4]}}" selected-class="calendar__day--selected"></ViCalendar>
</template>

.calendar__day--selected {
  background-color: #FDE9A8;
  border-radius: 8px;
}

Hide Week Nav

<template>
  <ViCalendar hideWeek></ViCalendar>
</template>

Custom Header

<template>
  <ViCalendar customHeader hideWeek selectedList="{{[12,15,6,8,4]}}" >
    <view class="calendar-header">11月打卡一览</view>
  </ViCalendar>
</view>
</template>

page {
  background-color:#39d3ef;
}
.signIn-card {
  width:710rpx;
  border-radius:8px;
  margin:0 auto 20px;
  padding-bottom: 10px;
  background: #FFF;
}

.calendar-header {
  color:#49D6EB;
  font-size:18px;
  text-align:center;
  margin:26rpx auto;
}

Config Props

| 接口 | 数据类型 | 说明 | 选项 | 默认值 | 版本号 | | :--: | :--: | :--: | :--: | :--: | :--: | | selectedList | Array[Number] | 当前要选中的日期 | 选填 | [] | 0.0.1 | | customHeader | Boolean | 是否需要自定义Header | 选填 | false | 0.0.1 | | hideWeek | Boolean | 是否需要隐藏周日期 | 选填 | false | 0.0.1 |

Slot Name

| slot name | 说明 | | :--: | :--: | | default | 用于自定义头部UI |

Extend Class

| Event name | 说明 | | :--: | :--: | | selected-class | 选中的样式 |

版本记录

• v0.0.5 新增自定义事件click
• v0.0.3 新增右侧内容插槽功能