#83

treadpit · Feb 18, 2019 · f908fcf · f908fcf
1 parent bc4ba77
commit f908fcf
Show file tree

Hide file tree

Showing 15 changed files with 90 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ const conf = {
 Page(conf);
 ```
 
-更多配置及功能请 [参考文档](https://treadpit.github.io)
+更多配置及功能请 [参考文档](http://calendar.isfeer.com)
 
 ### 日历模板效果图
 

diff --git a/docs/README.md b/docs/README.md
@@ -140,8 +140,11 @@ import { setTodoLabels } from '../../template/calendar/index';
 // 待办事项中若有 todoText 字段，则会在待办日期下面显示指定文字，如自定义节日等。
 
 setTodoLabels({
-  pos: 'bottom',
-  dotColor: '#40',
+  // 待办点标记设置
+  pos: 'bottom', // 待办点标记位置 ['top', 'bottom']
+  dotColor: '#40', // 待办点标记颜色
+  // 待办圆圈标记设置（如圆圈标记已签到日期），该设置与点标记设置互斥
+  circle: true, // 待办
   days: [{
     year: 2018,
     month: 1,
@@ -179,6 +182,13 @@ import { clearTodoLabels } from '../../template/calendar/index';
 clearTodoLabels();
 ```
 
+##### 6.4 获取所有代办日期
+```js
+import { getTodoLabels } from '../../template/calendar/index';
+
+getTodoLabels();
+```
+
 #### 7. 禁选指定日期
 
 ```js

diff --git a/docs/index.html b/docs/index.html
@@ -14,7 +14,7 @@
   <script src="https://unpkg.com/docute@3/dist/docute.js"></script>
   <script>
     docute.init({
-      url: docute.isDev ? location.origin : 'https://treadpit.github.io',
+      url: docute.isDev ? location.origin : 'http://calendar.isfeer.com',
       routerMode: 'history'
     })
   </script>

diff --git a/src/component/calendar/index.wxml b/src/component/calendar/index.wxml
@@ -29,11 +29,14 @@
           data-disable="{{item.disable}}"
           data-idx="{{index}}"
           bindtap="tapDayItem">
-            <view class="day-with-dot box box-tb box-align-center box-pack-center">
+            <view wx:if="{{!calendar.todoLabelCircle}}" class="dot-day-height box box-tb box-align-center box-pack-center">
               <view wx:if="{{item.showTodoLabel && calendar.todoLabelPos === 'top'}}" class="{{item.todoText ? 'todo-text' : 'todo-dot'}}" style="background-color: {{calendar.todoLabelColor}}">{{item.todoText}}</view>
-              <view class="day border-radius {{item.choosed ? 'day-choosed-color pink-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-circle' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
+              <view class="day border-radius {{item.choosed ? 'day-choosed-color day-choosed-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-bg' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
               <view wx:if="{{item.showTodoLabel && calendar.todoLabelPos === 'bottom'}}" class="{{item.todoText ? 'todo-text' : 'todo-dot'}}" style="background-color: {{calendar.todoLabelColor}}">{{item.todoText}}</view>
             </view>
+            <view wx:else class="dot-day-height box box-tb box-align-center box-pack-center">
+              <view class="day border-radius {{item.showTodoLabel ? 'day-circle' : '' }} {{item.choosed ? 'day-choosed-color day-choosed-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-bg' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
+            </view>
         </view>
         <view class="grid disable-day-color box box-align-center box-pack-center"
           wx:for="{{calendar.lastEmptyGrids}}"

diff --git a/src/component/calendar/index.wxss b/src/component/calendar/index.wxss
@@ -138,26 +138,31 @@
   color: #c2c2c2;
 }
 
-.day-with-dot {
+.dot-day-height {
   height: 72rpx;
 }
 
 .disable-day-color {
   color: #cacaca;
 }
 
-.disable-day-circle {
+.disable-day-bg {
   background-color: #f6f6f7;
 }
 
+.day-circle {
+  border: 1rpx solid #88d2ac;
+  box-sizing: border-box;
+}
+
 .border-radius {
   border-radius: 50%;
   position: relative;
   left: 0;
   top: 0;
 }
 
-.pink-bg {
+.day-choosed-bg {
   background-color: #ff629a;
   transition: all 0.3s;
   animation-name: choosed;

diff --git a/src/component/calendar/main.js b/src/component/calendar/main.js
@@ -487,7 +487,12 @@ const conf = {
     }
     const days = calendar.days.slice();
     const { curYear, curMonth } = calendar;
-    const { days: todoDays = [], pos = 'bottom', dotColor = '' } = options;
+    const {
+      days: todoDays = [],
+      pos = 'bottom',
+      dotColor = '',
+      circle
+    } = options;
     const { todoLabels = [], todoLabelPos, todoLabelColor } = calendar;
     const shouldMarkerTodoDay = todoDays.filter(
       item => +item.year === curYear && +item.month === curMonth
@@ -510,9 +515,13 @@ const conf = {
       'calendar.days': days,
       'calendar.todoLabels': uniqueTodoLabels(todoDays.concat(todoLabels))
     };
-    if (pos && pos !== todoLabelPos) o['calendar.todoLabelPos'] = pos;
-    if (dotColor && dotColor !== todoLabelColor) {
-      o['calendar.todoLabelColor'] = dotColor;
+    if (!circle) {
+      if (pos && pos !== todoLabelPos) o['calendar.todoLabelPos'] = pos;
+      if (dotColor && dotColor !== todoLabelColor) {
+        o['calendar.todoLabelColor'] = dotColor;
+      }
+    } else {
+      o['calendar.todoLabelCircle'] = circle;
     }
     this.setData(o);
   },
@@ -1016,6 +1025,12 @@ export const deleteTodoLabels = todos => {
 export const clearTodoLabels = () => {
   conf.clearTodoLabels.call(currentPage);
 };
+/**
+ * 获取所有 TODO 日期
+ */
+export const getTodoLabels = () => {
+  return currentPage && currentPage.data.calendar.todoLabels;
+};
 /**
  * 切换周月视图
  * @param {string} view 视图模式[week, month]

diff --git a/src/pages/calendar/index.wxml b/src/pages/calendar/index.wxml
@@ -16,7 +16,7 @@
             <view wx:if="{{hasEmptyGrid}}" class="grid white-color box box-align-center box-pack-center" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
             </view>
             <view class="grid white-color box box-align-center box-pack-center" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="tapDayItem">
-                <view class="day {{item.choosed ? 'border-radius pink-bg' : ''}} box box-align-center box-pack-center">{{item.day}}</view>
+                <view class="day {{item.choosed ? 'border-radius day-choosed-bg' : ''}} box box-align-center box-pack-center">{{item.day}}</view>
             </view>
         </view>
     </view>

diff --git a/src/pages/calendar/index.wxss b/src/pages/calendar/index.wxss
@@ -187,7 +187,7 @@ page {
   color: #fff;
 }
 
-.pink-bg {
+.day-choosed-bg {
   background-color: #ff629a;
 }
 

diff --git a/src/pages/calendarTemplate/index.js b/src/pages/calendarTemplate/index.js
@@ -46,12 +46,12 @@ const conf = {
         const data = [
           {
             year: '2019',
-            month: '1',
+            month: '2',
             day: '15'
           },
           {
             year: 2019,
-            month: 1,
+            month: 2,
             day: 18,
             todoText: '待办'
           }
@@ -61,6 +61,7 @@ const conf = {
           setTodoLabels({
             pos: 'bottom',
             dotColor: '#40',
+            circle: true,
             days: data
           });
           disableDay(1);

diff --git a/src/pages/index/index.wxml b/src/pages/index/index.wxml
@@ -1,9 +1,8 @@
 <view class="wrap">
-    <text>示例目前有独立页面和 template 两种模式,
+    <text>日历控件目前有 Component 和 template 两种方式引入,
       <text class="comments">(模板介绍参考微信小程序官方文档)</text>
     引入方法见 README</text>
-	  <navigator class="navigator" url="/pages/calendarTemplate/index">日历控件template 示例</navigator>
-	  <navigator class="navigator" url="/pages/calendarComponent/index">日历控件Component 示例</navigator>
-	  <navigator class="navigator" url="/pages/datepickerTemplate/index">日期选择器template 示例</navigator>
-	  <navigator class="navigator" url="/pages/calendar/index">日历独立页面(不维护)</navigator>
+	  <navigator class="navigator" url="/pages/calendarTemplate/index">日历控件 Template 示例</navigator>
+	  <navigator class="navigator" url="/pages/calendarComponent/index">日历控件 Component 示例</navigator>
+	  <navigator class="navigator" url="/pages/datepickerTemplate/index">日期选择器 Template 示例</navigator>
 </view>
diff --git a/src/template/calendar/index.js b/src/template/calendar/index.js
@@ -548,7 +548,12 @@ const conf = {
     }
     const days = calendar.days.slice();
     const { curYear, curMonth } = calendar;
-    const { days: todoDays = [], pos = 'bottom', dotColor = '' } = options;
+    const {
+      days: todoDays = [],
+      pos = 'bottom',
+      dotColor = '',
+      circle
+    } = options;
     const { todoLabels = [], todoLabelPos, todoLabelColor } = calendar;
     const shouldMarkerTodoDay = todoDays.filter(
       item => +item.year === curYear && +item.month === curMonth
@@ -571,9 +576,13 @@ const conf = {
       'calendar.days': days,
       'calendar.todoLabels': uniqueTodoLabels(todoDays.concat(todoLabels))
     };
-    if (pos && pos !== todoLabelPos) o['calendar.todoLabelPos'] = pos;
-    if (dotColor && dotColor !== todoLabelColor) {
-      o['calendar.todoLabelColor'] = dotColor;
+    if (!circle) {
+      if (pos && pos !== todoLabelPos) o['calendar.todoLabelPos'] = pos;
+      if (dotColor && dotColor !== todoLabelColor) {
+        o['calendar.todoLabelColor'] = dotColor;
+      }
+    } else {
+      o['calendar.todoLabelCircle'] = circle;
     }
     this.setData(o);
   },
@@ -1111,6 +1120,12 @@ export const deleteTodoLabels = todos => {
 export const clearTodoLabels = () => {
   conf.clearTodoLabels.call(currentPage);
 };
+/**
+ * 获取所有 TODO 日期
+ */
+export const getTodoLabels = () => {
+  return currentPage && currentPage.data.calendar.todoLabels;
+};
 /**
  * 切换周月视图
  * @param {string} view 视图模式[week, month]

diff --git a/src/template/calendar/index.wxml b/src/template/calendar/index.wxml
@@ -30,11 +30,14 @@
             data-disable="{{item.disable}}"
             data-idx="{{index}}"
             bindtap="tapDayItem">
-              <view class="day-with-dot box box-tb box-align-center box-pack-center">
+              <view wx:if="{{!todoLabelCircle}}" class="dot-day-height box box-tb box-align-center box-pack-center">
                 <view wx:if="{{item.showTodoLabel && todoLabelPos === 'top'}}" class="{{item.todoText ? 'todo-text' : 'todo-dot'}}" style="background-color: {{todoLabelColor}}">{{item.todoText}}</view>
-                <view class="day border-radius {{item.choosed ? 'day-choosed-color pink-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-circle' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
+                <view class="day border-radius {{item.choosed ? 'day-choosed-color day-choosed-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-bg' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
                 <view wx:if="{{item.showTodoLabel && todoLabelPos === 'bottom'}}" class="{{item.todoText ? 'todo-text' : 'todo-dot'}}" style="background-color: {{todoLabelColor}}">{{item.todoText}}</view>
               </view>
+              <view wx:else class="dot-day-height box box-tb box-align-center box-pack-center">
+                <view class="day border-radius {{item.showTodoLabel ? 'day-circle' : '' }} {{item.choosed ? 'day-choosed-color day-choosed-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-bg' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
+              </view>
           </view>
           <view class="grid disable-day-color box box-align-center box-pack-center"
             wx:for="{{lastEmptyGrids}}"

diff --git a/src/template/calendar/index.wxss b/src/template/calendar/index.wxss
@@ -138,26 +138,31 @@
   color: #c2c2c2;
 }
 
-.day-with-dot {
+.dot-day-height {
   height: 72rpx;
 }
 
 .disable-day-color {
   color: #cacaca;
 }
 
-.disable-day-circle {
+.disable-day-bg {
   background-color: #f6f6f7;
 }
 
+.day-circle {
+  border: 1rpx solid #88d2ac;
+  box-sizing: border-box;
+}
+
 .border-radius {
   border-radius: 50%;
   position: relative;
   left: 0;
   top: 0;
 }
 
-.pink-bg {
+.day-choosed-bg {
   background-color: #ff629a;
   transition: all 0.3s;
   animation-name: choosed;

diff --git a/src/template/datepicker/index.wxml b/src/template/datepicker/index.wxml
@@ -35,7 +35,7 @@
           data-idx="{{index}}"
           data-disable="{{item.disable}}"
           catchtap="tapDayItem">
-					<view class="day border-radius {{item.choosed ? 'day-choosed-color pink-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-circle' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
+					<view class="day border-radius {{item.choosed ? 'day-choosed-color day-choosed-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-bg' : '' }} box box-align-center box-pack-center">{{item.day}}</view>
 				</view>
 				<view class="grid disable-day-color  box box-align-center box-pack-center"
           wx:for="{{lastEmptyGrids}}"

diff --git a/src/template/datepicker/index.wxss b/src/template/datepicker/index.wxss
@@ -152,7 +152,7 @@
   color: #ddd;
 }
 
-.disable-day-circle {
+.disable-day-bg {
   background-color: #fbfdff;
 }
 
@@ -163,7 +163,7 @@
   top: 0;
 }
 
-.pink-bg {
+.day-choosed-bg {
   background-color: #ff629a;
 }