Skip to content

一个基于wepy的日历组件,内置多套皮肤,可启用打卡功能

License

Notifications You must be signed in to change notification settings

ronffy/wepy-com-calendar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Mar 7, 2019
ff2f5ce · Mar 7, 2019

History

22 Commits
Aug 15, 2018
Aug 12, 2018
Aug 12, 2018
Aug 12, 2018
Aug 15, 2018
Aug 12, 2018
Mar 7, 2019
Mar 7, 2019
Aug 12, 2018

Repository files navigation

wepy-com-calendar

npm

功能齐全的wepy日历组件,欢迎fork

介绍

  • 内置多种主题,亦可自定义主题样式
  • 响应式宽高
  • 支持打卡功能
  • 支持国际化(目前支持中、英两种)
  • 年、月通过小程序的picker进行改变,亦可通过上月、下月按钮进行改变

HOW TO USE

install

npm install wepy-com-calendar --save

use

// 在script标签内
import Calendar from 'wepy-com-calendar';
class MyCompent extens wepy.component {
  data = {
    selectedDates: ['2018-07-30', '2018-08-10', '2018-08-21']
  }
  events = {
    calendarAfterTapDay(date, e) {
      // 点击某一天后的回调
    }
  }
}

// 在template标签内
<template>
  <Calendar :checks.sync="selectedDates" theme="orange" />
</template>

其他主题展示

主题名称 展示
default
orange
blue
pink
green
black

API

参数 说明 类型 默认值
date 高亮的日期 YYYY-MM-DD 当前日期
checks 打卡的日期 array []
theme 主题名称,可选值有 default, green, pink, orange, black, blue string default
themeClassName 主题类名,用于自定义主题样式,优先级比theme高,传入此参数后,theme参数失效 string -
language 语言,支持中(zh_CN)、英(en_GB)两种 string zh_CN
icon check状态时imagesrc地址,如果不传此参数,则使用theme内置的图片作为icon string -
activeStyle 高亮的日期的样式 string -

事件EVENTS

wepy-com-calendar组件内统一通过$emit方式跟父组件通信,所以使用wepy-com-calendar组件时,将事件方法统一放在父组件的events属性上

参数 说明 类型
calendarAfterTapDay 点击某一天后触发的事件 function(date: YYYYMMDD, event)
calendarAfterTapNextMonth 点击下个月按钮触发的事件 function(event)
calendarAfterTapPreMonth 点击上个月按钮触发的事件 function(event)
calendarAfterChangePicker 通过年月选择器修改年或月后触发的事件 function(date: YYYYDD,event)

About

一个基于wepy的日历组件,内置多套皮肤,可启用打卡功能

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published