fix: fix event render didn't change with weekStartsOn

packages/semi-foundation/calendar/eventUtil.ts

@@ -98,7 +98,7 @@ export interface DateObj {
 
 export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
-export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale) => {
+export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
     [...Array(rangeLen).keys()].map(ind => {
@@ -106,8 +106,8 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
         const date = addDays(start, ind);
         dateObj.ind = ind;
         dateObj.date = date;
-        dateObj.dayString = format(date, 'd', { locale });
-        dateObj.weekday = format(date, 'EEE', { locale });
+        dateObj.dayString = format(date, 'd', { locale, weekStartsOn });
+        dateObj.weekday = format(date, 'EEE', { locale, weekStartsOn });
         dateObj.isToday = isSameDay(date, today);
         dateObj.isWeekend = checkWeekend(date);
         if (mode === 'month') {
@@ -129,7 +129,7 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
  */
 export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
     const start = startOfWeek(value, { weekStartsOn });
-    return calcRangeData(value, start, 7, mode, locale);
+    return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
 };
 
 /**
@@ -250,7 +250,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) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart), 1));
+export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
 
 /**
  * @returns {arr}
@@ -308,8 +308,9 @@ export const parseWeeklyAllDayEvent = (
     event: EventObject[],
     startDate: Date,
     weekStart: Date,
-    parsed: Array<Array<ParsedRangeEvent>>
-) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate), 1), parsed);
+    parsed: Array<Array<ParsedRangeEvent>>,
+    weekStartsOn: weeekStartsOnEnum
+) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate, { weekStartsOn }), 1), parsed);
 
 
 export const collectDailyEvents = (events: ParsedRangeEvent[][]) => {

packages/semi-foundation/calendar/foundation.ts

@@ -190,8 +190,8 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getWeeklyData(value: Date, dateFnsLocale: Locale) {
         const data = {} as WeeklyData;
-        data.month = format(value, 'LLL', { locale: dateFnsLocale });
         const { weekStartsOn } = this.getProps();
+        data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
         data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setWeeklyData(data);
         return data;
@@ -199,10 +199,10 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getRangeData(value: Date, dateFnsLocale: Locale) {
         const data = {} as { month: string; week: Array<DateObj> };
-        const { range } = this.getProps();
+        const { range, weekStartsOn } = this.getProps();
         const len = differenceInCalendarDays(range[1], range[0]);
-        data.month = format(value, 'LLL', { locale: dateFnsLocale });
-        data.week = calcRangeData(value, range[0], len, 'week', dateFnsLocale);
+        data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
+        data.week = calcRangeData(value, range[0], len, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setRangeData(data);
         return data;
     }
@@ -211,7 +211,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const monthStart = startOfMonth(value);
         const data = {} as MonthData;
         const { weekStartsOn } = this.getProps();
-        const numberOfWeek = getWeeksInMonth(value);
+        const numberOfWeek = getWeeksInMonth(value, { weekStartsOn });
         [...Array(numberOfWeek).keys()].map(ind => {
             data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
         });
@@ -263,12 +263,13 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
     // ================== Weekly Event ==================
 
     _parseWeeklyEvents(events: ParsedEvents['allDay'], weekStart: Date) {
+        const { weekStartsOn } = this.getProps();
         let parsed = [[]] as ParsedRangeEvent[][];
-        const filtered = filterWeeklyEvents(events, weekStart);
+        const filtered = filterWeeklyEvents(events, weekStart, weekStartsOn);
         [...filtered.keys()].sort((a, b) => sortDate(a, b)).forEach(item => {
             const startDate = new Date(item);
             const curr = filtered.get(item).filter(event => isSameDay(event.date, startDate));
-            parsed = parseWeeklyAllDayEvent(curr, startDate, weekStart, parsed);
+            parsed = parseWeeklyAllDayEvent(curr, startDate, weekStart, parsed, weekStartsOn);
         });
         return parsed;
     }
@@ -332,7 +333,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     getParseMonthlyEvents(itemLimit: number) {
         const parsed: any = {};
-        const { displayValue, events } = this.getProps();
+        const { displayValue, events, weekStartsOn } = this.getProps();
         const currDate = this._getDate();
         const firstDayOfMonth = startOfMonth(displayValue);
         const lastDayOfMonth = endOfMonth(displayValue);
@@ -354,31 +355,30 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
             // WeekInd calculation error, need to consider the boundary situation at the beginning/end of the month
             // When the date falls within the month
             if (isSameMonth(item.date, displayValue)) {
-                const weekInd = getWeekOfMonth(item.date) - 1;
+                const weekInd = getWeekOfMonth(item.date, { weekStartsOn }) - 1;
                 this.pushDayEventIntoWeekMap(item, weekInd, parsed);
                 return;
             }
             // When the date is within the previous month
             if (isBefore(item.date, firstDayOfMonth)) {
-                if (isSameWeek(item.date, firstDayOfMonth)) {
+                if (isSameWeek(item.date, firstDayOfMonth, { weekStartsOn })) {
                     this.pushDayEventIntoWeekMap(item, 0, parsed);
                 }
                 return;
             }
             // When the date is within the next month
             if (isAfter(item.date, lastDayOfMonth)) {
-                if (isSameWeek(item.date, lastDayOfMonth)) {
-                    const weekInd = getWeekOfMonth(lastDayOfMonth) - 1;
+                if (isSameWeek(item.date, lastDayOfMonth, { weekStartsOn })) {
+                    const weekInd = getWeekOfMonth(lastDayOfMonth, { weekStartsOn }) - 1;
                     this.pushDayEventIntoWeekMap(item, weekInd, parsed);
                 }
                 return;
             }
         });
-
         Object.keys(parsed).forEach(key => {
             const week = parsed[key];
             parsed[key] = {};
-            const weekStart = startOfWeek(week[0].date);
+            const weekStart = startOfWeek(week[0].date, { weekStartsOn });
             const weekMap = convertEventsArrToMap(week, 'start', startOfDay);
             // When there are multiple events in a week, multiple events should be parsed
             // const oldParsedWeeklyEvent = this._parseWeeklyEvents(weekMap, weekStart);

packages/semi-ui/calendar/_story/calendar.stories.js

@@ -530,7 +530,24 @@ export const EventRender  = () => <EventRenderDemo />;
 
 
 export const WeekStartsOnDemo = () => {
-    const [v, setV] = useState(0);
+    const [v, setV] = useState(6);
+    const allDayStyle = {
+      borderRadius: '3px',
+      boxSizing: 'border-box',
+      border: 'var(--semi-color-bg-1) 1px solid',
+      padding: '2px 4px',
+      backgroundColor: 'var(--semi-color-primary-light-active)',
+      height: '100%',
+      overflow: 'hidden',
+    };
+    const events = [
+      {
+        key: '0',
+        start: new Date(2022, 8, 5, 14, 45, 0),
+        end: new Date(2022, 8, 6, 6, 18, 0),
+        children: <div style={allDayStyle}>9月5日 14:45 ~ 9月6日 6:18</div>,
+      }
+    ]
     return (
         <div>
             <RadioGroup defaultValue={v} aria-label="周起始日" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
@@ -544,9 +561,9 @@ export const WeekStartsOnDemo = () => {
             </RadioGroup>
             <Calendar
                 mode="month"
-                weekStartsOn={v}
+                weekStartsOn={1}
+                events={events}
                 dateGridRender={(dateString, date) => {
-                    console.log(dateString);
                     if (dateString === new Date(2019, 6, 16).toString()) {
                     return (
                         <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>123test</div>