日期底部文字

插件开发代码/miniprogram/pages/index/index.js

@@ -19,6 +19,8 @@ Page({
 
         style: [],
         activeType: 'rounded', // 日期背景效果
+
+		bottom:false,//底部文字显示与隐藏
     },
 
     onLoad: function () {
@@ -111,11 +113,11 @@ Page({
         } else {
             this.setData({
                 style: [
-                    { month: 'current', day: 3, color: 'white', background: '#58cc69' },
-                    { month: 'current', day: 12, color: 'white', background: '#728eff' },
-                    { month: 'current', day: 13, color: 'white', background: '#728eff' },
-                    { month: 'current', day: 14, color: 'white', background: '#728eff' },
-                    { month: 'current', day: 15, color: 'white', background: '#728eff' },
+					{ month: 'current', day: 3, color: 'white', background: '#58cc69', bottomText: '售罄', fontSize: '20rpx' },
+					{ month: 'current', day: 12, color: 'white', background: '#728eff' },
+					{ month: 'current', day: 13, color: 'white', background: '#728eff' },
+					{ month: 'current', day: 14, color: 'white', background: '#728eff', bottomText: '已签到', fontSize:'20rpx' },
+					{ month: 'current', day: 15, color: 'white', background: '#58cc69', bottomText: '未签到', fontSize: '20rpx' },
                     { month: 'current', day: 16, color: 'white', background: '#728eff' },
                     { month: 'current', day: 26, color: 'white', background: '#ff72a6' },
                     { month: 'current', day: 27, color: 'white', background: '#ff72a6' },
@@ -124,6 +126,12 @@ Page({
         }
     },
 
+	switchBottom:function(){
+		this.setData({
+			bottom: !this.data.bottom
+		});
+	},
+
     changeTitle: function (event) {
         const index = event.detail.value;
         switch (index) {

插件开发代码/miniprogram/pages/index/index.wxml

@@ -35,6 +35,8 @@ actives:[激活的日期]
     days-color="{{style}}"
     active-type="{{activeType}}"
     next-month='hi'
+
+	bottom='{{bottom}}'
 
     bindnextMonth='nextMonth'                
     bindprevMonth='prevMonth'
@@ -83,4 +85,8 @@ actives:[激活的日期]
         <radio value="rounded" checked="true" style="margin-right: 10px;">圆形</radio>
         <radio value="square">方形</radio>
     </radio-group>
+</div>
+<div class="cell">
+    <p class="title">显示底部文字</p>
+    <switch checked="{{bottom}}" bindchange='switchBottom'></switch>
 </div>

插件开发代码/plugin/components/calendar/calendar.js

@@ -16,7 +16,7 @@
  * 12、cellSize: 单元格大小 整型
  * 13、daysColor：设置日期字体、背景颜色
  * 14、activeType: 日期背景效果（正方形、圆形）[rounded, square]
- * 
+ * 15、bottom: 是否显示日期底部文字
  * 事件方法：
  * 1、nextMonth：点击下个月
  * 2、prevMonth：点击上个月
@@ -168,7 +168,16 @@ Component({
             type: Boolean,
             value: false,
             observer: '_showLunar'
-        }
+        },
+
+        /**
+         * 是否显示日期底部文字
+         */
+		bottom: {
+			type: Boolean,
+			value: false,
+			observer: '_showBottom'
+		}
     },
 
     /**
@@ -378,12 +387,22 @@ Component({
             this.setData({
                 lunar: !!newConfig
             });
-        },
+		},
+
+        /**
+         * 是否显示底部
+         */
+		_showBottom: function (newConfig, oldConfig) {
+			this.setData({
+				bottom: !!newConfig
+			});
+		},
 
         /**
          * 设置日期单元格字体颜色、背景
          */
         _setDaysColor: function (newDaysColor, oldDaysColor) {
+			console.log(newDaysColor);
             this.setData({
                 days_color: newDaysColor
             }, function () {
@@ -509,7 +528,12 @@ Component({
                         }
                         if (item.background) {
                             days[j].background = item.background + '!important';
-                        }
+						}
+						['bottomText', 'bottomColor', 'fontSize'].forEach((attr) => {
+							if (item[attr]) {
+								days[j][attr] = item[attr];
+							}
+						});
                     }
                 }
             }

插件开发代码/plugin/components/calendar/calendar.wxml

@@ -54,7 +54,8 @@
                             <block wx:else>
                                 <text class="calendar-day" style="color: {{day.color}};">{{day.day}}</text>
                                 <text class="calendar-lunar-day" style="color: {{day.color}};" wx:if="{{lunar}}">{{day.lunarDay}}</text>
-                            </block>                            
+                            </block>
+							<view style="color: {{day.bottomColor || day.color}};font-size: {{ day.fontSize }}" wx:if="{{bottom}}">{{day.bottomText}}</view>
                         </view>
                     </block>
                 </view>