fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-02 03:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Katherine 2025-06-20 16:55:14 +08:00 committed by GitHub
parent e808da6f52
commit 4959e6a78e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,8 +47,9 @@ import useStyle from './style';
import type { ToolbarProps } from './types'; import type { ToolbarProps } from './types';
import { formatDate } from './utils'; import { formatDate } from './utils';
import updateLocale from 'dayjs/plugin/updateLocale'; 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 { interface Event {
id: string; id: string;
@ -268,12 +269,16 @@ export const Calendar: any = withDynamicSchemaProps(
); );
const localizer = useMemo(() => { 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 // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { dataSource, fieldNames, showLunar, getFontColor, getBackgroundColor, enableQuickCreateEvent } = const { dataSource, fieldNames, showLunar, getFontColor, getBackgroundColor, enableQuickCreateEvent } =
useProps(props); useProps(props);
@ -455,14 +460,14 @@ export const Calendar: any = withDynamicSchemaProps(
}); });
}} }}
formats={{ 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) => { dayRangeHeaderFormat: ({ start, end }, culture, local) => {
if (eq(start, end, 'month')) { 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} components={components}

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

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