Feature component calendar customize the cell

src/components/calendar/body/index.tsx

@@ -53,6 +53,7 @@ export default class AtCalendarBody extends Taro.Component<
     super(...arguments)
     const {
       validDates,
+      priceDates,
       marks,
       format,
       minDate,
@@ -64,6 +65,7 @@ export default class AtCalendarBody extends Taro.Component<
 
     this.generateFunc = generateCalendarGroup({
       validDates,
+      priceDates,
       format,
       minDate,
       maxDate,
@@ -110,13 +112,14 @@ export default class AtCalendarBody extends Taro.Component<
     arr[preListIndex] = preList
     arr[nextListIndex] = nextList
     arr[this.currentSwiperIndex] = nowList
-
+    
     return arr
   }
 
   componentWillReceiveProps (nextProps: Props) {
     const {
       validDates,
+      priceDates,
       marks,
       format,
       minDate,
@@ -128,6 +131,7 @@ export default class AtCalendarBody extends Taro.Component<
 
     this.generateFunc = generateCalendarGroup({
       validDates,
+      priceDates,
       format,
       minDate,
       maxDate,
@@ -258,7 +262,7 @@ export default class AtCalendarBody extends Taro.Component<
   render () {
     const { isSwiper } = this.props
     const { isAnimate, offsetSize, listGroup } = this.state
-
+    
     if (!isSwiper) {
       return (
         <View

src/components/calendar/body/interface.ts

@@ -7,6 +7,8 @@ export interface Props {
 
   validDates: Array<Calendar.ValidDate>
 
+  priceDates: Array<Calendar.PriceDate>
+
   marks: Array<Calendar.Mark>
 
   isSwiper: boolean

src/components/calendar/common/plugins.ts

@@ -124,4 +124,22 @@ export function handleValid (
   return item
 }
 
-export default [handleActive, handleMarks, handleDisabled, handleValid]
+export function handlePrice (
+  args: PluginArg,
+  item: Calendar.Item
+): Calendar.Item {
+  const { options } = args
+  const { value } = item
+  const { priceDates } = options
+  if (!_isEmpty(priceDates)) {
+    for (let [, date] of priceDates.entries()){
+      let result = dayjs(date.value).startOf('day').isSame(value);
+      if(result){
+        item.price = date.price;
+      }
+    }
+  }
+  return item
+}
+
+export default [handleActive, handleMarks, handleDisabled, handleValid, handlePrice]

src/components/calendar/index.tsx

@@ -18,6 +18,7 @@ import { DefaultProps, Props, State, PropsWithDefaults } from './interface'
 
 const defaultProps: DefaultProps = {
   validDates: [],
+  priceDates: [],
   marks: [],
   isSwiper: true,
   hideArrow: false,
@@ -239,7 +240,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
     })
 
     if (_isFunction(this.props.onDayClick)) {
-      this.props.onDayClick({ value: item.value })
+      this.props.onDayClick(item)
     }
   }
 
@@ -271,6 +272,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
     const { generateDate, selectedDate } = this.state
     const {
       validDates,
+      priceDates,
       marks,
       format,
       minDate,
@@ -296,6 +298,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
           onSelectDate={this.handleSelectDate}
         />
         <AtCalendarBody
+          priceDates={priceDates}
           validDates={validDates}
           marks={marks}
           format={format}

src/components/calendar/interface.ts

@@ -25,7 +25,7 @@ export interface PropsBase {
 
   onSelectDate?: (item: { value: Calendar.SelectedDate }) => void
 
-  onDayClick?: (item: { value: string }) => void
+  onDayClick?: (item: Calendar.Item ) => void
 
   onDayLongClick?: (item: { value: string }) => void
 
@@ -53,6 +53,8 @@ export interface DefaultProps {
 
   validDates: Array<Calendar.ValidDate>
 
+  priceDates: Array<Calendar.PriceDate>
+
   marks: Array<Calendar.Mark>
 
   currentDate: Calendar.DateArg | Calendar.SelectedDate

src/components/calendar/types.d.ts

@@ -18,6 +18,11 @@ declare namespace Calendar {
     value: DateArg
   }
 
+  export interface PriceDate {
+    value: DateArg,
+    price: number
+  }
+
   export interface Item {
     value: string
 
@@ -29,6 +34,8 @@ declare namespace Calendar {
 
     marks: Array<Mark>
 
+    price?: number
+
     isActive?: boolean
 
     isToday?: boolean
@@ -49,6 +56,8 @@ declare namespace Calendar {
   export interface GroupOptions {
     validDates: Array<ValidDate>
 
+    priceDates: Array<PriceDate>
+
     marks: Array<Mark>
 
     format: string

src/components/calendar/ui/date-list/index.tsx

@@ -54,10 +54,10 @@ export default class AtCalendarList extends Taro.Component<Props> {
               `flex__item--${MAP[item.type]}`,
               {
                 'flex__item--today': item.isToday,
-                'flex__item--active': item.isActive,
-                'flex__item--selected': item.isSelected,
-                'flex__item--selected-head': item.isSelectedHead,
-                'flex__item--selected-tail': item.isSelectedTail,
+                'flex__item--active': item.isActive && !item.isDisabled,
+                'flex__item--selected': item.isSelected && !item.isDisabled,
+                'flex__item--selected-head': item.isSelectedHead && !item.isDisabled,
+                'flex__item--selected-tail': item.isSelectedTail && !item.isDisabled,
                 'flex__item--blur':
                   item.isDisabled ||
                   item.type === constant.TYPE_PRE_MONTH ||
@@ -67,6 +67,12 @@ export default class AtCalendarList extends Taro.Component<Props> {
           >
             <View className='flex__item-container'>
               <View className='container-text'>{item.text}</View>
+              {
+                item.price && 
+                <View className='container-text-extra'>
+                    ￥{item.price}
+                </View>
+              }
             </View>
             <View className='flex__item-extra extra'>
               {item.marks && item.marks.length > 0 ? (

src/pages/advanced/calendar/index.tsx

@@ -10,6 +10,10 @@ import './index.scss'
 import DocsHeader from '../../components/doc-header'
 import AtCalendar from '../../../components/calendar/index'
 
+import _cloneDeep from 'lodash/cloneDeep'
+import _replace from 'lodash/replace'
+import dayjs from 'dayjs'
+
 export default class Index extends Component {
   config: Config = {
     navigationBarTitleText: 'Taro日历组件展示'
@@ -32,14 +36,69 @@ export default class Index extends Component {
         value: '2019/04/17'
       },
       {
-        value: '2019/04/21'
+        value: '2019/06/04'
+      },
+      {
+        value: '2019/06/05'
+      },
+      {
+        value: '2019/06/06'
+      },
+      {
+        value: '2019/06/08'
+      },
+      {
+        value: '2019/06/09'
       },
       {
         value: '2019/05/04'
       },
       {
         value: '2019/05/28'
       }
+    ],
+    tempValidDates: [],
+    priceDates: [
+      {
+        value: '2019/04/17',
+        price: 10
+      },
+      {
+        value: '2019/05/17',
+        price: 114
+      },
+      {
+        value: '2019/06/17',
+        price: 225
+      },
+      {
+        value: '2019/06/01',
+        price: 229
+      },
+      {
+        value: '2019/06/04',
+        price: 1122
+      },
+      {
+        value: '2019/06/05',
+        price: 1210
+      },
+      {
+        value: '2019/06/06',
+        price: 11198
+      },
+      {
+        value: '2019/06/08',
+        price: 780
+      },
+      {
+        value: '2019/06/09',
+        price: 880
+      },
+      {
+        value: '2019/06/21',
+        price: 487
+      },
     ]
   }
 
@@ -62,7 +121,7 @@ export default class Index extends Component {
 
   @bind
   handleDayClick (...arg) {
-    console.log('handleDayClick', arg)
+    console.log('handleDayClick', arg);
   }
 
   @bind
@@ -72,6 +131,48 @@ export default class Index extends Component {
 
   @bind
   handleDateChange (arg) {
+    let { value } = arg;
+    let _filterValidDates = (startTime: string,flag: boolean)=>{
+      let result:any = [];
+      var i = 1;
+      while(1){
+        var date = dayjs(startTime);
+        let nextDay = flag ? date.add(i,'day') : date.subtract(i,'day');
+        let dateStr = nextDay.format('YYYY/MM/DD');
+        let notExist = false;
+        for(let item of this.state.validDates){
+          let itemStr = dayjs(item.value).format('YYYY/MM/DD')
+          if(itemStr === dateStr){
+            notExist = true;
+            result.push({
+              value: item.value
+            })
+            i++;
+            break;
+          }
+        }
+        if(!notExist){
+          break;
+        }
+      }
+      return result
+    }
+    let _filterDates = (startTime: string) => {
+      return [{value: _replace(startTime,/\-/g, '/')}, ..._filterValidDates(startTime,true), ..._filterValidDates(startTime,false) ];
+    }
+    if(value.end){
+      this.setState({validDates: this.state.tempValidDates})
+    }else{
+      let startTime = value.start;
+      if(startTime){
+        let result = _filterDates(startTime);
+        let copyDates = _cloneDeep(this.state.validDates);
+        this.setState({
+          tempValidDates: copyDates,
+          validDates: result
+        })
+      }
+    }
     console.log('handleDateChange', arg)
   }
 
@@ -81,7 +182,7 @@ export default class Index extends Component {
   }
 
   render () {
-    const { now, minDate, maxDate, mark, multiCurentDate, validDates } = this.state
+    const { now, minDate, maxDate, mark, multiCurentDate, validDates, priceDates } = this.state
     return (
       <View className='page calendar-page'>
         <DocsHeader title='Calendar 日历' />
@@ -199,6 +300,14 @@ export default class Index extends Component {
               <AtCalendar validDates={validDates}/>
             </View>
           </View>
+
+          <View className='panel'>
+            <View className='panel__title'>有效时间组+多选+自定义cell文本</View>
+            <View className='panel__content'>
+              <AtCalendar validDates={validDates} priceDates={priceDates} isMultiSelect onDayClick={this.handleDayClick} onSelectDate={this.handleDateChange}/>
+            </View>
+          </View>
+
         </View>
       </View>
     )

src/style/components/calendar.scss

@@ -46,10 +46,22 @@
           height: $at-calendar-day-size;
           margin-left: auto;
           margin-right: auto;
+          flex-direction: column;
           border-radius: 50%;
 
           .container-text {
+            @include display-flex;
             @include flex;
+            @include align-items(center);
+
+            line-height: 1;
+          }
+
+          .container-text-extra {
+            @include flex;
+
+            font-size: 16px;
+            line-height: 1;
           }
         }
 
@@ -64,7 +76,7 @@
             .mark {
               width: $at-calendar-mark-size;
               height: $at-calendar-mark-size;
-              margin-right: 4px;
+              margin-right: 8px;
               display: inline-block;
               background-color: $at-calendar-main-color;
               border-radius: 50%;

src/style/variables/default.scss

@@ -207,7 +207,7 @@ $at-fab-box-shadow-active:
   0 10px 44px 8px rgba(0, 0, 0, 0.12) !default;
 
 /* Calendar */
-$at-calendar-day-size: 72px !default;
+$at-calendar-day-size: 88px !default;
 $at-calendar-mark-size: 8px !default;
 $at-calendar-header-color: #B8BFC6 !default;
 $at-calendar-main-color: $color-brand !default;