Merge pull request #146 from treadpit/develop

fix color error in week mode & update docs
treadpit · Aug 1, 2019 · 9ff4ab8 · 9ff4ab8
2 parents 797d50b + 3a01a06
commit 9ff4ab8
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 25 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -88,6 +88,8 @@ const conf = {
       disablePastDay: true, // 是否禁选过去的日期
       firstDayOfWeek: 'Mon', // 每周第一天为周一还是周日，默认按周日开始
       onlyShowCurrentMonth: true, // 日历面板是否只显示本月日期
+      hideHeadOnWeekMode: true, // 周视图模式是否隐藏日历头部
+      showHandlerOnWeekMode: true, // 周视图模式是否显示日历头部操作栏，hideHeadOnWeekMode 优先级高于此配置
       /**
        * 初始化日历时指定默认选中日期，如：'2018-3-6' 或 '2018-03-06'
        * 注意：若想初始化时不默认选中当天，则将该值配置为除 undefined 以外的其他非值即可，如：空字符串, 0 ,false等。
@@ -294,6 +296,8 @@ this.calendar.setSelectedDays(toSet);
 
 `switchView('week')`，默认值为'month'；
 
+> 因周视图模式特殊性，该模式下会隐藏年月切换操作栏
+
 ```js
 // 切换为周视图
 this.calendar.switchView('week');

diff --git a/src/component/calendar/index.js b/src/component/calendar/index.js
@@ -46,6 +46,9 @@ Component({
     chooseYear(type) {
       const { curYear, curMonth } = this.data.calendar;
       if (!curYear || !curMonth) return warn('异常：未获取到当前年月');
+      if (this.weekMode) {
+        return console.warn('周视图下不支持点击切换年月');
+      }
       let newYear = +curYear;
       let newMonth = +curMonth;
       if (type === 'prev_year') {
@@ -58,6 +61,9 @@ Component({
     chooseMonth(type) {
       const { curYear, curMonth } = this.data.calendar;
       if (!curYear || !curMonth) return warn('异常：未获取到当前年月');
+      if (this.weekMode) {
+        return console.warn('周视图下不支持点击切换年月');
+      }
       let newYear = +curYear;
       let newMonth = +curMonth;
       if (type === 'prev_month') {
@@ -116,7 +122,7 @@ Component({
       }
     },
     doubleClickToToday() {
-      if (this.config.multi) return;
+      if (this.config.multi || this.weekMode) return;
       if (this.count === undefined) {
         this.count = 1;
       } else {

diff --git a/src/component/calendar/index.wxml b/src/component/calendar/index.wxml
@@ -1,12 +1,12 @@
 <view class="flex b tb ac" wx:if="{{calendar}}">
   <view class="calendar pink-color b tb">
-    <view class="top-handle fs28 b lr ac pc">
-      <view class="prev fs36">
+    <view wx:if="{{!calendarConfig.hideHeadOnWeekMode}}" class="top-handle fs28 b lr ac pc">
+      <view class="prev fs36" wx:if="{{calendarConfig.showHandlerOnWeekMode || !calendar.weekMode}}">
         <text class="prev-handle iconfont icon-doubleleft" bindtap="chooseDate" data-type="prev_year"></text>
         <text class="prev-handle iconfont icon-left" bindtap="chooseDate" data-type="prev_month"></text>
       </view>
       <view class="flex date-area b lr cc" bindtap="doubleClickToToday">{{calendar.curYear || "--"}} 年 {{calendar.curMonth || "--"}} 月</view>
-      <view class="next fs36">
+      <view class="next fs36" wx:if="{{calendarConfig.showHandlerOnWeekMode || !calendar.weekMode}}">
         <text class="next-handle iconfont icon-right" bindtap="chooseDate" data-type="next_month"></text>
         <text class="next-handle iconfont icon-doubleright" bindtap="chooseDate" data-type="next_year"></text>
       </view>

diff --git a/src/component/calendar/main.js b/src/component/calendar/main.js
@@ -572,9 +572,11 @@ const conf = {
       } else {
         target = days[item.day - 1];
       }
-      if (target) target.showTodoLabel = !target.choosed;
-      if (target.showTodoLabel && item.todoText) {
-        target.todoText = item.todoText;
+      if (target) {
+        target.showTodoLabel = !target.choosed;
+        if (target.showTodoLabel && item.todoText) {
+          target.todoText = item.todoText;
+        }
       }
     });
     const o = {
@@ -831,15 +833,17 @@ const conf = {
         days.push({
           year: curYear,
           month: curMonth,
-          day: i
+          day: i,
+          week: getDayOfWeek(curYear, curMonth, i)
         });
       }
     } else {
       for (let i = lastDayInThisWeek + 1; i <= lastDayInThisMonth; i++) {
         days.push({
           year: curYear,
           month: curMonth,
-          day: i
+          day: i,
+          week: getDayOfWeek(curYear, curMonth, i)
         });
       }
       const { Uyear, Umonth } = conf.updateCurrYearAndMonth('next');
@@ -849,7 +853,8 @@ const conf = {
         days.push({
           year: curYear,
           month: curMonth,
-          day: i
+          day: i,
+          week: getDayOfWeek(curYear, curMonth, i)
         });
       }
     }
@@ -877,7 +882,8 @@ const conf = {
         days.push({
           year: curYear,
           month: curMonth,
-          day: i
+          day: i,
+          week: getDayOfWeek(curYear, curMonth, i)
         });
       }
     } else {
@@ -886,7 +892,8 @@ const conf = {
         temp.push({
           year: curYear,
           month: curMonth,
-          day: i
+          day: i,
+          week: getDayOfWeek(curYear, curMonth, i)
         });
       }
       const { Uyear, Umonth } = conf.updateCurrYearAndMonth('prev');
@@ -901,7 +908,8 @@ const conf = {
         days.push({
           year: curYear,
           month: curMonth,
-          day: i
+          day: i,
+          week: getDayOfWeek(curYear, curMonth, i)
         });
       }
       days = days.concat(temp);
@@ -922,8 +930,6 @@ const conf = {
     let { days, curYear, curMonth } = getData('calendar');
     let { year, month, day } = currentDay;
     let lastWeekDays = conf.lastWeekInMonth(year, month);
-    let empytGrids = [];
-    let lastEmptyGrids = [];
     const firstWeekDays = conf.firstWeekInMonth(year, month);
     // 判断选中日期的月份是否与当前月份一致
     if (curYear !== year || curMonth !== month) day = 1;
@@ -944,7 +950,8 @@ const conf = {
         temp.push({
           year: curYear,
           month: curMonth,
-          day: i
+          day: i,
+          week: getDayOfWeek(curYear, curMonth, i)
         });
       }
       days = temp.concat(firstWeekDays);
@@ -962,7 +969,8 @@ const conf = {
           temp.push({
             year: curYear,
             month: curMonth,
-            day: i
+            day: i,
+            week: getDayOfWeek(curYear, curMonth, i)
           });
         }
       }
@@ -975,27 +983,34 @@ const conf = {
     days = conf.initSelectedDay(days);
     setData({
       'calendar.days': days,
-      'calendar.empytGrids': empytGrids,
-      'calendar.lastEmptyGrids': lastEmptyGrids
+      'calendar.empytGrids': [],
+      'calendar.lastEmptyGrids': []
     });
   },
   /**
    * 周、月视图切换
    * @param {string} view  视图 [week, month]
+   * @param {object} day  {year: 2017, month: 11, day: 1}
    */
-  switchWeek(view) {
+  switchWeek(view, day) {
     if (getCalendarConfig().multi) return warn('多选模式不能切换周月视图');
     const { selectedDay = [], curYear, curMonth } = getData('calendar');
     if (!selectedDay.length) return;
     const currentDay = selectedDay[0];
     if (view === 'week') {
       if (Component.weekMode) return;
       Component.weekMode = true;
-      conf.selectedDayWeekAllDays(currentDay);
+      setData({
+        'calendar.weekMode': true
+      });
+      conf.selectedDayWeekAllDays(day || currentDay);
     } else {
       Component.weekMode = false;
       let { year, month, day } = currentDay;
       if (curYear !== year || curMonth !== month) day = 1;
+      setData({
+        'calendar.weekMode': false
+      });
       conf.renderCalendar(curYear, curMonth, day);
     }
   },
@@ -1109,11 +1124,21 @@ export function getTodoLabels(componentId) {
 }
 /**
  * 切换周月视图
- * @param {string} view 视图模式[week, month]
+ * args[0] view 视图模式[week, month]
+ * 剩余两参数为切换到某一天day(如: {year: 2019, month: 1, day: 3})或者 componentId
  */
-export function switchView(view, componentId) {
-  bindCurrentComponent(componentId, this);
-  conf.switchWeek(view);
+export function switchView(...args) {
+  const view = args[0];
+  if (!args[1]) return conf.switchWeek(view);
+  if (typeof args[1] === 'string') {
+    bindCurrentComponent(args[1], this);
+    conf.switchWeek(view, args[2]);
+  } else if (typeof args[1] === 'object') {
+    if (typeof args[2] === 'string') {
+      bindCurrentComponent(args[1], this);
+    }
+    conf.switchWeek(view, args[1]);
+  }
 }
 /**
  * 禁用指定日期