推荐简约漂亮的小程序日历插件

本文 1492字,需要 3.73 分钟

今天主要向小程序开发者,推荐一款由我们团队开发的「日历」小程序插件。

好比 PHP 的 composer、前端的 npm,Java 的 jar包,小程序插件的出现,极大的方便了我们共享组件,减小开发量。

小程序插件 calendar

对比较复杂但又不容易实现的功能,我们本能的不想花大量的时间去开发,性价比不高,所以我们都习惯性的寻找第三方解决,其中日历功能就是一个较为典型的案例。

插件介绍

一句话介绍:满足日历基本功能,可以自定义样式,简约大方。

先睹为快

使用方法:

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 有效值

普通备注

week_type 有效值

显示为:日, 一, 二, 三, 四, 五, 六

active_type 有效值

圆形背景

pitch_on 有效值

圆形背景

事件

注: 在js写方法 在html传入

点击下个月
<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 + '月'
    });
  },

样式

日历整体样式

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

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

总结

复用代码,复用插件,把有价值的东西拿出来与大家分享,互相学习,是我们的价值观,接下来还会制作更多更加精良的插件奉献给更多的开发者使用。


原文发布于微信公众号 - coding01(coding01)

原文发表时间:2018-07-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

浏览器为契机贯穿前端知识点-大纲参考

ps:动画不连贯,因为浏览器渲染有一个最小时间间隔(这块之前搜藏了) 涉及如下部分:

9210
来自专栏BestSDK

一文读懂Xcode 9 所有更新:全新模拟器,兼容Swift低版本等

代码重构功能增强 这次 Xcode 9 对代码重构功能有较大的提升,首先是重命名功能,在编辑器中点击类名,然后选择 Refactor -> Rename: ?...

46470
来自专栏Web 开发

Deploy WordPress On SAE

也没怎么刻意去选择,从各种cPanel主机,到VPS,再到AppFog等Pass,基本上都玩了一遍了。

10100
来自专栏地方网络工作室的专栏

Python3 初学实践案例(7)tkinter 入门 GUI 的密码生成程序

Python3 初学实践案例(7)tkinter 入门 GUI 的密码生成程序 前面我已经非常好的完成了 cli 的密码生成程序的编写 http://blog....

30980
来自专栏数据之美

Web 自动化测试与智能爬虫利器:PhantomJS 简介与实战

估计部分同学没听过这个工具,那先简单介绍下它的背景与作用。 1、PhantomJS 是什么? PhantomJS是一个基于WebKit的服务器端JavaScri...

62790
来自专栏游戏杂谈

HTML5的Histroy API

比较典型的是GitHub,在点击代码文件夹和文件时,会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了(跟新开了一个新页面感觉一样),但体验起来很...

21530
来自专栏大数据钻研

前端开发面试题总结之——HTML

---- 相关知识点 web标准、 web语义化、 浏览器内核、 兼容性、 html5... 题目&答案 Doctype作用?严格模式与混杂模式如何区分?它们有...

37580
来自专栏狮乐园

高级 Angular 组件模式 (7)

因为父组件会提供所有相关的 UI 元素(比如这里的 button),所以 toggle 组件的开发者可能无法满足组件使用者的一些附加需求,比如,在一个自定义的开...

18620
来自专栏编程

Python2下载单张图片和爬取网页图片

昨天用Python2爬取了一首歌的热评和评论总数,今天用Python2来下载图片。 一、需求分析 1、知道图片的url地址,将图片下载到本地。 2、知道网页地址...

28890
来自专栏iOS Developer

微信小程序开发教程-从零开始(2)

20460

扫码关注云+社区

领取腾讯云代金券