feat(calendar): multiple-selected-state

packages/calendar/calendar.wxml

@@ -26,12 +26,14 @@
       date="{{ item }}"
       type="{{ type }}"
       color="{{ color }}"
+      extraColors="{{ extraColors }}"
       minDate="{{ minDate }}"
       maxDate="{{ maxDate }}"
       showMark="{{ showMark }}"
       formatter="{{ formatter }}"
       rowHeight="{{ rowHeight }}"
       currentDate="{{ currentDate }}"
+      currentDateSelectedState = "{{ currentDateSelectedState }}"
       showSubtitle="{{ showSubtitle }}"
       allowSameDay="{{ allowSameDay }}"
       showMonthTitle="{{ index !== 0 || !showSubtitle }}"

packages/calendar/components/month/index.ts

@@ -9,6 +9,7 @@ import {
 export interface Day {
   date: Date;
   type: string;
+  selectedState: number;
   text: number;
   bottomInfo?: string;
 }
@@ -24,6 +25,7 @@ VantComponent({
       observer: 'setDays',
     },
     color: String,
+    extraColors: null,
     minDate: {
       type: null,
       observer: 'setDays',
@@ -42,6 +44,10 @@ VantComponent({
       type: null,
       observer: 'setDays',
     },
+    currentDateSelectedState: {
+      type: Array,
+      observer: 'setDays',
+    },
     firstDayOfWeek: {
       type: Number,
       observer: 'setDays',
@@ -79,10 +85,12 @@ VantComponent({
       for (let day = 1; day <= totalDay; day++) {
         const date = new Date(year, month, day);
         const type = this.getDayType(date);
+        const selectedState = this.getDaySelectedState(date, type);
 
         let config: Day = {
           date,
           type,
+          selectedState,
           text: day,
           bottomInfo: this.getBottomInfo(type),
         };
@@ -188,6 +196,19 @@ VantComponent({
       return '';
     },
 
+    getDaySelectedState(day: number | Date, dayType: string): number {
+      const { type, currentDate, currentDateSelectedState } = this.data;
+
+      if (type !== 'multiple' || dayType === 'disabled' || !dayType) {
+        return 0;
+      }
+
+      const index = currentDate.findIndex(
+        (item) => compareDay(item, day) === 0
+      );
+      return currentDateSelectedState[index] || 1;
+    },
+
     getBottomInfo(type) {
       if (this.data.type === 'range') {
         if (type === 'start') {

packages/calendar/components/month/index.wxml

@@ -14,8 +14,8 @@
     <view
       wx:for="{{ days }}"
       wx:key="index"
-      style="{{ computed.getDayStyle(item.type, index, date, rowHeight, color, firstDayOfWeek) }}"
-      class="{{ utils.bem('calendar__day', [item.type]) }} {{ item.className }}"
+      style="{{ computed.getDayStyle(item.type, index, date, rowHeight, color, firstDayOfWeek, item.selectedState, extraColors) }}"
+      class="{{ utils.bem('calendar__day', [item.type]) }} {{ item.className }} selected-state-{{ item.selectedState }}"
       data-index="{{ index }}"
       bindtap="onClick"
     >

packages/calendar/components/month/index.wxs

@@ -7,7 +7,7 @@ function getMark(date) {
 
 var ROW_HEIGHT = 64;
 
-function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
+function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek, selectedState, extraColors) {
   var style = [];
   var current = getDate(date).getDay() || 7;
   var offset = current < firstDayOfWeek ? (7 - firstDayOfWeek + current) :
@@ -22,16 +22,19 @@ function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
     style.push(['height', rowHeight + 'px']);
   }
 
-  if (color) {
+  if (color || extraColors.length > 0) {
     if (
       type === 'start' ||
       type === 'end' ||
       type === 'start-end' ||
       type === 'multiple-selected' ||
       type === 'multiple-middle'
     ) {
-      style.push(['background', color]);
-    } else if (type === 'middle') {
+      var bgColor = (extraColors || [])[selectedState - 2] || color;
+      if (bgColor) {
+        style.push(['background', bgColor]);
+      }
+    } else if (type === 'middle' && color) {
       style.push(['color', color]);
     }
   }

packages/calendar/demo/index.ts

@@ -5,11 +5,15 @@ type Data = {
   type?: 'single' | 'multiple' | 'range';
   round?: boolean;
   color?: string;
+  extraColors?: string[];
+  selectedStateCount?: number;
   minDate?: number;
   maxDate?: number;
   maxRange?: any;
   position?: 'top' | 'right' | 'bottom' | 'left';
   formatter?: any;
+  defaultDate?: number | number[];
+  defaultDateSelectedState?: number[];
   showConfirm?: boolean;
   showCalendar?: boolean;
   tiledMinDate?: number;
@@ -33,10 +37,12 @@ VantComponent({
       customRange: null,
       customDayText: [],
       customPosition: null,
+      multipleSelectedState: [],
     },
     type: 'single',
     round: true,
     color: '',
+    extraColors: [] as string[],
     minDate: Date.now(),
     maxDate: new Date(
       new Date().getFullYear(),
@@ -46,6 +52,8 @@ VantComponent({
     maxRange: undefined,
     position: 'bottom',
     formatter: undefined,
+    defaultDate: [] as number | number[],
+    defaultDateSelectedState: [] as number[],
     showConfirm: false,
     showCalendar: false,
     tiledMinDate: new Date(2012, 0, 10).getTime(),
@@ -60,10 +68,16 @@ VantComponent({
       console.log(event);
       this.setData({ showCalendar: false });
 
+      let value = Array.isArray(event.detail)
+        ? event.detail.map((date) => date.valueOf())
+        : event.detail.valueOf();
+
+      if (this.data.type === 'multiple' && this.data.selectedStateCount > 1) {
+        value = event.detail.date.map((date) => date.valueOf());
+      }
+
       this.setData({
-        [`date.${this.data.id}`]: Array.isArray(event.detail)
-          ? event.detail.map((date) => date.valueOf())
-          : event.detail.valueOf(),
+        [`date.${this.data.id}`]: value,
       });
     },
 
@@ -91,10 +105,15 @@ VantComponent({
       console.log('closed');
     },
 
+    onSelectedStateChange(event) {
+      console.log('selectedStateChange', event);
+    },
+
     resetSettings() {
       this.setData({
         round: true,
         color: '',
+        extraColors: [] as string[],
         minDate: Date.now(),
         maxDate: new Date(
           new Date().getFullYear(),
@@ -147,6 +166,16 @@ VantComponent({
         case 'maxRange':
           data.maxRange = 3;
           break;
+        case 'multipleSelectedState':
+          data.selectedStateCount = 3;
+          data.extraColors = ['#2baeb3', '#ff6e3c'];
+          // data.defaultDate = [
+          //   new Date(2024, 5, 10).getTime(),
+          //   new Date(2024, 4, 26).getTime(),
+          //   new Date(2024, 8, 10).getTime(),
+          // ];
+          // data.defaultDateSelectedState = [1, 2, 3];
+          break;
       }
 
       this.setData(data);

packages/calendar/demo/index.wxml

@@ -103,6 +103,15 @@
     value="{{ computed.formatRange(date.maxRange) }}"
     bind:click="show"
   />
+
+  <van-cell
+    is-link
+    title="多个日期多个选中态"
+    data-type="multiple"
+    data-id="multipleSelectedState"
+    value="{{ computed.formatMultiple(date.multipleSelectedState) }}"
+    bind:click="show"
+  />
 </demo-block>
 
 <demo-block title="平铺展示">
@@ -121,6 +130,7 @@
   show="{{ showCalendar }}"
   type="{{ type }}"
   color="{{ color }}"
+  extraColors="{{ extraColors }}"
   round="{{ round }}"
   position="{{ position }}"
   min-date="{{ minDate }}"
@@ -131,12 +141,16 @@
   confirm-text="{{ confirmText }}"
   confirm-disabled-text="{{ confirmDisabledText }}"
   first-day-of-week="{{ firstDayOfWeek }}"
+  selectedStateCount="{{ selectedStateCount }}"
+  defaultDate="{{ defaultDate }}"
+  defaultDateSelectedState="{{ defaultDateSelectedState }}"
   bind:confirm="onConfirm"
   bind:select="onSelect"
   bind:unselect="onUnselect"
   bind:open="onOpen"
   bind:opened="onOpened"
   bind:close="onClose"
   bind:closed="onClosed"
+  bind:selectedStateChange="onSelectedStateChange"
 >
 </van-calendar>