微信小程序> 小程序插件,推荐简约漂亮的小程序插件calendar

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

浏览量:444 时间: 来源:coding01
公司团队制作,主要用于内部使用,觉得这个感觉不错,所以推荐出来,让大家试试~
日历功能日历基本功能,自定义样式
先睹为快IMG_2556使用方法: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、说明:默认的用法,将具备以下样式特点:
显示当前月份的日历;显示日历标题、显示上下月按钮;显示周标题,周标题默认为cn类型,即中文简写;显示日期下方的小圆点;属性名类型默认值说明curYearNumber当前年份年份curMonthNumber当前月份月份(0-11)dayNumber当前日期日期(1-31若日期超过该月天数,月份自动增加)header_showBooleantrue主标题是否显示nextBooleantrue是否显示下个月按钮prevBooleantrue是否显示下个月按钮remark_showBooleanfalse备注是否显示remark_styleStringheadline备注类型count_numNumber0备注类型为date备注信息1count_berNumber0备注类型为date备注信息2count_txtString此处为备注信息备注类型为headline备注信息weekTitle_showBooleantrue周标题是否显示week_typeStringcn周标题类型active_typeStringcircle选中日期样式circle_showBooleantrue日期下方的点是否显示(每过一天添加一个)pitch_onStringcircle日期下方的点样式appearBooleanfalse样式线是否显示mystatusArray[]想要的对应日期的状态calendarcur-year="{{curYear}}"cur-month="{{curMonth}}"day="{{day}}"header_show='{{header_show}}'prev='{{prev}}'next='{{next}}'/data:{curYear:newDate().getFullYear(),//年份curMonth:newDate().getMonth(),//月份0-11day:newDate().getDate(),//日期1-31若日期超过该月天数,月份自动增加header_show:true,//主标题是否显示prev:true,//上一个月按钮是否显示next:true,//下一个月按钮是否显示},remark_style有效值值说明headline普通备注date出勤备注week_type有效值值说明cn显示为:日,一,二,三,四,五,六en显示为:S,M,T,W,T,F,Sfull-en显示为:Sun,Mon,Tue,Wed,Thu,Fri,Satactive_type有效值值说明circle圆形背景square方形背景pitch_on有效值值说明circle圆形背景square方形背景事件注:在js写方法在html传入
事件方法说明nextMonth点击下个月prevMonth点击上个月selectDate点击日期calendarbindselectDate='selectDate'bindnextMonth='nextMonth'bindprevMonth='prevMonth'//点击上个月/nextMonth:function(e){console.log(e)constcurrentYear=e.detail.currentYear;constcurrentMonth=e.detail.currentMonth;wx.showModal({title:'当前日期',content:'当前年份:'+currentYear+'年当前月份:'+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;}calendarheader-style='header-style'/

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎