Fix/month calendar (#1571)

* chore: [Calendar] fix typo

* fix: [Calendar] calcWeekData pass wrong value

* test: [Calendar] fix unit test

* chore: [Calendar] update comments

packages/semi-foundation/calendar/eventUtil.ts

@@ -96,9 +96,9 @@ export interface DateObj {
     month: string
 }
 
-export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type weekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
-export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
     [...Array(rangeLen).keys()].map(ind => {
@@ -121,15 +121,17 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
 
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+export const calcWeekData = (value: Date, monthStart: Date | null, mode = 'week', locale: Locale, weekStartsOn: weekStartsOnEnum) => {
     const start = startOfWeek(value, { weekStartsOn });
-    return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
+    const realValue = monthStart || value;
+    return calcRangeData(realValue, start, 7, mode, locale, weekStartsOn);
 };
 
 /**
@@ -250,7 +252,7 @@ export const filterEvents = (events: Map<string, EventObject[]>, start: Date, en
  * filter out event that is not in the week range
  */
 // eslint-disable-next-line max-len
-export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
+export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
 
 /**
  * @returns {arr}
@@ -309,7 +311,7 @@ export const parseWeeklyAllDayEvent = (
     startDate: Date,
     weekStart: Date,
     parsed: Array<Array<ParsedRangeEvent>>,
-    weekStartsOn: weeekStartsOnEnum
+    weekStartsOn: weekStartsOnEnum
 ) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate, { weekStartsOn }), 1), parsed);
 
 

packages/semi-foundation/calendar/foundation.ts

@@ -33,9 +33,9 @@ import {
     DateObj,
     checkWeekend,
 } from './eventUtil';
-import type { weeekStartsOnEnum } from './eventUtil';
+import type { weekStartsOnEnum } from './eventUtil';
 
-export { weeekStartsOnEnum };
+export { weekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;
     key: string;
@@ -191,7 +191,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const data = {} as WeeklyData;
         const { weekStartsOn } = this.getProps();
         data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
-        data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
+        data.week = calcWeekData(value, null, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setWeeklyData(data);
         return data;
     }
@@ -212,7 +212,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const { weekStartsOn } = this.getProps();
         const numberOfWeek = getWeeksInMonth(value, { weekStartsOn });
         [...Array(numberOfWeek).keys()].map(ind => {
-            data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
+            data[ind] = calcWeekData(addDays(monthStart, ind * 7), monthStart, 'month', dateFnsLocale, weekStartsOn);
         });
         this._adapter.setMonthlyData(data);
         return data;

packages/semi-ui/calendar/__test__/calendar.test.js

@@ -179,4 +179,25 @@ describe('Calendar', () => {
         let defaultFirstHead = defaultCalendar.find('.semi-calendar-month-header li').at(0).text();
         expect(defaultFirstHead).toEqual('周日');
     });
+
+    it('test getMonthlyData same month fixture', () => {
+        const displayValue = new Date(2023, 3, 10, 8, 32, 0);
+
+        let calendar = mount(<Calendar
+            mode={'month'}
+            displayValue={displayValue}
+        ></Calendar>);
+
+        let firstRow = calendar.find('.semi-calendar-month-weekrow').at(0);
+        let lastRow = calendar.find('.semi-calendar-month-weekrow').last();
+        let sameMonthClass = `${BASE_CLASS_PREFIX}-calendar-month-same`;
+        // 2023-03-26
+        expect(firstRow.find('li').at(0).hasClass(sameMonthClass)).toEqual(false);
+        // 2023-04-01
+        expect(firstRow.find('li').last().hasClass(sameMonthClass)).toEqual(true);
+        // 2023-04-30
+        expect(lastRow.find('li').at(0).hasClass(sameMonthClass)).toEqual(true);
+        // 2023-05-06
+        expect(lastRow.find('li').last().hasClass(sameMonthClass)).toEqual(false);
+    });
 })

packages/semi-ui/calendar/interface.ts

@@ -1,7 +1,7 @@
 import { strings } from '@douyinfe/semi-foundation/calendar/constants';
 import type { ArrayElement } from '../_base/base';
 import type { BaseProps } from '../_base/baseComponent';
-import type { EventObject, weeekStartsOnEnum } from '@douyinfe/semi-foundation/calendar/foundation';
+import type { EventObject, weekStartsOnEnum } from '@douyinfe/semi-foundation/calendar/foundation';
 
 export interface CalendarProps extends BaseProps {
     displayValue?: Date;
@@ -10,7 +10,7 @@ export interface CalendarProps extends BaseProps {
     events?: EventObject[];
     mode?: ArrayElement<typeof strings.MODE>;
     showCurrTime?: boolean;
-    weekStartsOn?: weeekStartsOnEnum;
+    weekStartsOn?: weekStartsOnEnum;
     scrollTop?: number;
     onClick?: (e: React.MouseEvent, value: Date) => void;
     onClose?: (e: React.MouseEvent) => void;