• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

日历功能

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

先睹为快

使用方法:

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\' />

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap