vi-calendar v0.0.1

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

Slot Name

Extend Class

版本记录

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