公司团队制作,主要用于内部使用,觉得这个感觉不错,所以推荐出来,让大家试试~

日历功能

日历基本功能,自定义样式

先睹为快

使用方法:

1、 在微信小程序管理后台——设置——第三方服务,按 AppID( wx23a9cef3522e4f7c)搜索到该插件并申请授权。

2、在要使用该插件的小程序 app.json 文件中引入插件声明。

"plugins": {
"calendar": {
"version": "1.0.0",
"provider": "wx23a9cef3522e4f7c"
}
}

3、在需要使用到该插件的小程序页面的 JSON 配置文件中,做以下配置:

{
"usingComponents": {
"calendar": "plugin://calendar/calendar"
}
}

4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。

<calendar />

5、说明:默认的用法,将具备以下样式特点:

  1. 显示当前月份的日历;
  2. 显示日历标题、显示上下月按钮;
  3. 显示周标题,周标题默认为 cn 类型,即中文简写;
  4. 显示日期下方的小圆点;
属性名 类型 默认值 说明
curYear Number 当前年份 年份
curMonth Number 当前月份 月份 (0 - 11)
day Number 当前日期 日期 (1-31 若日期超过该月天数,月份自动增加)
header_show Boolean true 主标题是否显示
next Boolean true 是否显示下个月按钮
prev Boolean true 是否显示下个月按钮
remark_show Boolean false 备注是否显示
remark_style String headline 备注类型
count_num Number 0 备注类型为date 备注信息1
count_ber Number 0 备注类型为date 备注信息2
count_txt String 此处为备注信息 备注类型为headline 备注信息
weekTitle_show Boolean true 周标题是否显示
week_type String cn 周标题类型
active_type String circle 选中日期样式
circle_show Boolean true 日期下方的点是否显示(每过一天添加一个)
pitch_on String circle 日期下方的点样式
appear Boolean false 样式线是否显示
mystatus Array [ ] 想要的对应日期的状态
<calendar
cur-year="{{curYear}}"
cur-month="{{curMonth}}"
day="{{day}}"
header_show='{{header_show}}'
prev='{{prev}}'
next='{{next}}'
/>
data: {
curYear: new Date().getFullYear(), // 年份
curMonth: new Date().getMonth(),// 月份 0-11
day: new Date().getDate(), // 日期 1-31 若日期超过该月天数,月份自动增加
header_show: true, // 主标题是否显示
prev: true, // 上一个月按钮是否显示
next: true, // 下一个月按钮是否显示
},

remark_style 有效值

说明
headline 普通备注
date 出勤备注

week_type 有效值

说明
cn 显示为:日, 一, 二, 三, 四, 五, 六
en 显示为:S, M, T, W, T, F, S
full-en 显示为:Sun, Mon, Tue, Wed, Thu, Fri, Sat

active_type 有效值

说明
circle 圆形背景
square 方形背景

pitch_on 有效值

说明
circle 圆形背景
square 方形背景

事件

注: 在js写方法 在html传入

事件方法 说明
nextMonth 点击下个月
prevMonth 点击上个月
selectDate 点击日期
<calendar bindselectDate='selectDate'  bindnextMonth='nextMonth' bindprevMonth='prevMonth'/>

/**
* 点击上个月
*/
nextMonth: function (e) {
console.log(e)
const currentYear = e.detail.currentYear;
const currentMonth = e.detail.currentMonth;
wx.showModal({
title: '当前日期',
content: '当前年份:' + currentYear + '年\n当前月份:' + currentMonth + '月'
});
},

样式

类名 说明
calendar-style 日历整体样式
header-style 主标题样式
weektitle-style 周标题面板样式
datatitle-style 日期面板样式
dotcolor-o 对应日期的状态为1 日期下方的点颜色变化 demo模拟的出勤情况 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息
dotcolor-t 对应日期的状态为其他 日期下方的点颜色变化 demo模拟的出勤情况 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息
headline-style 备注类型为headline的备注信息样式
atefont-style 日期字体样式

注: 在wxss自定义写样式 在html传入

例:

/* 主题面板样式  */
.header-style{
background: #188be4 ;
color: #fff;
}
<calendar header-style='header-style' />

推荐简约漂亮的小程序插件 calendar的更多相关文章

  1. 「腾讯视频」微信小程序插件介绍

    上期,我们在<从原理到应用,一文带你了解小程序插件能力>一文中介绍了小程序插件的意义.作用以及应用.今天开始,我们会每期与大家分享一款优秀的小程序插件,从使用场景到使用方法,都将作出详细的 ...

  2. 微信小程序插件 - 开发教程

    昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现. 这篇文章,我将会带大家,从0开始,学习如何开发和使用插件. ...

  3. 小程序插件使用wx.createSelectorQuery()获取不到节点信息

    发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this) 例如: const query = wx.createSel ...

  4. uni-app——小程序插件使用wx.createSelectorQuery()获取不到节点信息

    发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this) 例如: const query = wx.createSel ...

  5. 微信小程序 -- 英语词典 (小程序插件)

    英语词典小程序 基于英语词典小程序插件 - 提供开源地址 项目地址 英语词典小程序插件: 微信小程序 词典 真题基础服务插件(gitee.com) 功能特色 [x] 全面详实的经典词库,详细释义覆盖约 ...

  6. 微信小程序 插件介绍

    小程序的插件是对一组js接口.自定义组件或页面的封装.插件不能独立运行,必须嵌入在其他小程序中才能被用户使用:而第三方小程序在使用插件时,也无法看到插件的代码.因此,插件适合用来封装自己的功能或服务, ...

  7. 微信小程序插件内页面跳转和参数传递(转)

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  8. 微信小程序插件使用

    使用插件 小程序开发者可便捷地把插件添加到自己的小程序内,丰富小程序的服务.当用户在使用小程序时,将可以在小程序内使用插件提供的服务. 开放范围 所有小程序 接入流程 在小程序管理后台添加插件 小程序 ...

  9. 微信小程序插件内页面跳转和参数传递

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

随机推荐

  1. Chapter04 运算符(Operator)

    Chapter04 运算符 目录 Chapter04 运算符 4.1 算数运算符 4.2 关系运算符 4.3 逻辑运算符 4.4 赋值运算符 4.5 三元运算符 4.6 运算符的优先级 4.7 标识符 ...

  2. 自定义 serializers.ValidationError 的错误返回

    在使用DRF进行反序列过程中,总是需要校验字段,然后返回错误结果.可以使用默认的自定义校验项,也可以自定义校验项.而默认的自定义校验项总是差强人意. 版本 Django 2.2.3 Python 3. ...

  3. 【VR游戏】封神榜传

    领悟导入SteamVR和VRTK,SteamVR要和CameraRig位置保持一致.1.可以创建多个scene,然后进行连接跳转.但是创建好之后要自己重新导回scene附:删除MainCamera,添 ...

  4. mybatis crud 学习总结02

    1.db.properties 原因:数据库的连接直接写到配置(mybati-config.xml)里存在安全隐患 解决:将配置的信息放到一个文件中管理 右键resources --> File ...

  5. LGP7580题解

    设: \[g(x)=\prod_{i=1}^{k_i}\binom {m} {c_{d,i}+m} \] 那么很明显有: \[f= a * g \] 再看一眼 \(g\),我们发现 \(g\) 是积性 ...

  6. 线程的sleep()方法和yield()方法有什么区别?

    sleep()方法和yield()方法的区别: sleep()方法给其他线程运行机会时,不考虑线程的优先级,因此会给低优先级的线程运行机会:yield()方法只会给相同优先级或更高优先级的线程运行机会 ...

  7. HamsterBear 构建可启动的镜像(更新中)

    HamsterBear 构建可启动的镜像 Allwinner SoC 上电后会执行BootROM中的程序,会依次从SDIO,SPI等接口查询可引导的设备, SPI设备具有最低引导权,若无法查询到可引导 ...

  8. Mybatis中Log4j日志的使用

    参考资料: (1). 百度百科:https://baike.baidu.com/item/log4j/480673?fr=aladdin (2). B站狂神的视频:https://www.bilibi ...

  9. ClickHouse镜像在阿里云镜像站首发上线

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 简介 ClickHouse是开源.高性能的列式OLAP的数据库管理系统(DBMS).使用SQL进行实时分析. ClickHouse可以做用户行为分析 ...

  10. 关于使用charles进行mock步骤

    1.应用场景: 1.1 测试环境中,可能存在部分依赖外部系统的http接口,因为外部系统未部署或服务不可用等其他原因,导致接口无法正常响应(特别是qa1环境): 而平时的测试主要还是以界面上的功能测试 ...