fix: date field issue in quick create form of calendar block (#7106)

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calendar.tsx

@@ -47,8 +47,9 @@ import useStyle from './style';
 import type { ToolbarProps } from './types';
 import { formatDate } from './utils';
 import updateLocale from 'dayjs/plugin/updateLocale';
-
+import { dateFnsLocalizer } from 'react-big-calendar';
-dayjs.extend(updateLocale);
+import { format, parse, startOfWeek, getDay } from 'date-fns';
+import enUS from 'date-fns/locale/en-US';
 
 interface Event {
   id: string;
@@ -268,12 +269,16 @@ export const Calendar: any = withDynamicSchemaProps(
       );
 
       const localizer = useMemo(() => {
-        dayjs.updateLocale('en', {
+        return dateFnsLocalizer({
-          weekStart: props.weekStart ?? '1',
+          format,
+          parse,
+          startOfWeek: (date) => {
+            return startOfWeek(date, { locale: { options: { weekStartsOn: props.weekStart } } });
+          },
+          getDay,
+          locales: { 'en-US': enUS },
         });
-        return reactBigCalendar.dayjsLocalizer(dayjs);
+      }, [props.weekStart]);
-      }, [reactBigCalendar]);
-
       // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
       const { dataSource, fieldNames, showLunar, getFontColor, getBackgroundColor, enableQuickCreateEvent } =
         useProps(props);
@@ -455,14 +460,14 @@ export const Calendar: any = withDynamicSchemaProps(
                 });
               }}
               formats={{
-                monthHeaderFormat: 'YYYY-M',
+                monthHeaderFormat: 'yyyy-M',
-                agendaDateFormat: 'M-DD',
+                agendaDateFormat: 'M-dd',
-                dayHeaderFormat: 'YYYY-M-DD',
+                dayHeaderFormat: 'yyyy-M-dd',
                 dayRangeHeaderFormat: ({ start, end }, culture, local) => {
                   if (eq(start, end, 'month')) {
-                    return local.format(start, 'YYYY-M', culture);
+                    return local.format(start, 'yyyy-M', culture);
                   }
-                  return `${local.format(start, 'YYYY-M', culture)} - ${local.format(end, 'YYYY-M', culture)}`;
+                  return `${local.format(start, 'yyyy-M', culture)} - ${local.format(end, 'yyyy-M', culture)}`;
                 },
               }}
               components={components}

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calender.Settings.tsx

@@ -277,11 +277,11 @@ export const calendarBlockSettings = new SchemaSettings({
         const { name } = useCollection();
         const app = useApp();
         const plugin = app.pm.get('calendar') as any;
-        const { dateTimeFields } = plugin;
+        const { dateTimeFieldInterfaces } = plugin;
         return {
           title: t('Start date field'),
           value: fieldNames.start,
-          options: getCollectionFieldsOptions(name, null, dateTimeFields, {
+          options: getCollectionFieldsOptions(name, null, dateTimeFieldInterfaces, {
             association: ['o2o', 'obo', 'oho', 'm2o'],
           }),
           onChange: (start) => {
@@ -315,11 +315,11 @@ export const calendarBlockSettings = new SchemaSettings({
         const fieldNames = fieldSchema?.['x-decorator-props']?.['fieldNames'] || {};
         const app = useApp();
         const plugin = app.pm.get('calendar') as any;
-        const { dateTimeFields } = plugin;
+        const { dateTimeFieldInterfaces } = plugin;
         return {
           title: t('End date field'),
           value: fieldNames.end,
-          options: getCollectionFieldsOptions(name, null, dateTimeFields, {
+          options: getCollectionFieldsOptions(name, null, dateTimeFieldInterfaces, {
             association: ['o2o', 'obo', 'oho', 'm2o'],
           }),
           onChange: (end) => {