日历功能日历基本功能,自定义样式
先睹为快
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'/













