feat: support swiper calendar in week mode

xc39 · Sep 7, 2020 · b4bbc7a · b4bbc7a
1 parent 4e17238
commit b4bbc7a
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 82 deletions.
diff --git a/docs/v2/api.md b/docs/v2/api.md
@@ -18,7 +18,7 @@ title: 功能一览
 # 预设功能
 
 ::: tip
-预设功能为日历组件自有方法，无需单独引入插件
+预设功能为一系列插件集合(plugins/preset/index.js)，无需单独引入
 :::
 
 ## 跳转至指定日期
@@ -150,7 +150,7 @@ calendar.setDateStyle(toSet)
 }
 ```
 
-# 需引入插件： todo
+# 需引入插件： plugins/todo.js
 
 ## 待办事项
 
@@ -206,7 +206,7 @@ calendar.clearTodos()
 calendar.getTodos(options)
 ```
 
-# 需引入插件： selectable
+# 需引入插件： plugins/selectable.js
 
 ## 指定可选日期区域
 
@@ -224,7 +224,27 @@ calendar.enableArea(['2018-11-12', '2018-11-30'])
 calendar.enableDates(['2018-11-12', '2018-12-3', '2019-1-3'])
 ```
 
-# 需引入插件： solarLunar
+# 需引入插件： plugins/week.js
+
+## 周月视图切换
+
+默认值为 'month'
+
+::: tip
+因周视图模式特殊性，该模式下会隐藏年月切换操作栏
+:::
+
+```js
+// 切换为周视图
+calendar.switchView('week').then(() => {});
+
+// 切换为月视图
+calendar.switchView().then(() => {});
+// 或者
+calendar.switchView('month').then(() => {});
+```
+
+# 需引入插件： plugins/solarLunar.js
 
 ## 获取指定日期农历信息
 

diff --git a/src/component/v2/index.js b/src/component/v2/index.js
@@ -78,7 +78,6 @@ Component({
         config.highlightToday = true
       }
       config.theme = config.theme || 'default'
-      this.weekMode = config.weekMode
       this.setData(
         {
           config
@@ -177,6 +176,7 @@ Component({
         year: +curYear,
         month: +curMonth
       })
+      target.direction = direction
       this.renderCalendar(target)
     },
     changeDate(e) {
@@ -188,6 +188,7 @@ Component({
         year: +curYear,
         month: +curMonth
       })
+      target.direction = type
       this.renderCalendar(target)
     },
     renderCalendar(target) {
@@ -196,7 +197,7 @@ Component({
       for (let plugin of plugins.installed) {
         const [, p] = plugin
         if (typeof p.onSwitchCalendar === 'function') {
-          calendarData = p.onSwitchCalendar(target, this)
+          calendarData = p.onSwitchCalendar(target, calendarData, this)
         }
       }
       return renderCalendar.call(this, calendarData, config).then(() => {

diff --git a/src/component/v2/index.wxml b/src/component/v2/index.wxml
@@ -2,12 +2,12 @@
   <view class="calendar b tb">
     <!-- 头部操作栏 -->
     <view class="handle {{config.theme}}_handle-color fs28 b lr ac pc">
-      <view class="prev fs36">
+      <view class="prev fs36" wx:if="{{!config.weekMode}}">
         <text class="prev-handle iconfont icon-doubleleft" bindtap="changeDate" data-type="prev_year"></text>
         <text class="prev-handle iconfont icon-left" bindtap="changeDate" data-type="prev_month"></text>
       </view>
       <view class="flex date-in-handle b lr cc" bindtap="doubleClickToToday">{{calendar.curYear || "--"}} 年 {{calendar.curMonth || "--"}} 月</view>
-      <view class="next fs36">
+      <view class="next fs36" wx:if="{{!config.weekMode}}">
         <text class="next-handle iconfont icon-right" bindtap="changeDate" data-type="next_month"></text>
         <text class="next-handle iconfont icon-doubleright" bindtap="changeDate" data-type="next_year"></text>
       </view>

diff --git a/src/component/v2/plugins/preset/base.js b/src/component/v2/plugins/preset/base.js
@@ -10,7 +10,6 @@ import {
 export default () => {
   return {
     name: 'base',
-    install(comp) {},
     beforeRender(calendarData = {}) {
       const calendar = calendarData
       const { selectedDates = [], dates } = calendar
@@ -56,8 +55,9 @@ export default () => {
         if (preSelectedDate.date) {
           const idx = dateUtil.findDateIndexInArray(preSelectedDate, dates)
           const date = dates[idx]
-          if (!date) return
-          date.choosed = false
+          if (date) {
+            date.choosed = false
+          }
         }
         if (dates[dateIndex].choosed) {
           calendar.selectedDates = [dates[dateIndex]]
@@ -86,9 +86,11 @@ export default () => {
         dates
       }
     },
-    onSwitchCalendar(date, component) {
-      const calendarData = getCalendarData('calendar', component)
+    onSwitchCalendar(date, calendarData = {}, component) {
       const calendarConfig = getCalendarConfig(component)
+      if (calendarConfig.weekMode) {
+        return calendarData
+      }
       const updatedRenderData = calcJumpData({
         dateInfo: date,
         config: calendarConfig