diff --git a/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx b/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx
index 5ff0fdc38..cdf0c1f4b 100644
--- a/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/Calendar.tsx
@@ -7,40 +7,17 @@ import React, { useMemo, useState } from 'react';
import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
import * as dates from 'react-big-calendar/lib/utils/dates';
import { useTranslation } from 'react-i18next';
-import solarLunar from 'solarlunar-es';
import { RecordProvider } from '../../../';
import { i18n } from '../../../i18n';
import { useProps } from '../../hooks/useProps';
import { ActionContext } from '../action';
+import Header from './components/Header';
import { CalendarToolbarContext } from './context';
import './style.less';
import type { ToolbarProps } from './types';
const localizer = momentLocalizer(moment);
-const DateHeader = ({ date, label, drilldownView, onDrillDown, showLunar = false }) => {
- if (!drilldownView) {
- return {label};
- }
-
- const lunarElement = useMemo(() => {
- if (!showLunar) {
- return;
- }
- const md = moment(date);
- const result = solarLunar.solar2lunar(md.year(), md.month() + 1, md.date());
- const lunarDay = typeof result !== 'number' ? result.lunarFestival || result.term || result.dayCn : result;
- return {lunarDay};
- }, [date, showLunar]);
-
- return (
-
- {label}
- {lunarElement}
-
- );
-};
-
function Toolbar(props: ToolbarProps) {
const fieldSchema = useFieldSchema();
const toolBarSchema: Schema = useMemo(
@@ -172,8 +149,13 @@ export const Calendar: any = observer((props: any) => {
}}
defaultDate={new Date()}
components={{
- toolbar: Toolbar,
- dateHeader: (props) => ,
+ toolbar: (props) => ,
+ week: {
+ header: (props) => ,
+ },
+ month: {
+ dateHeader: (props) => ,
+ },
}}
localizer={localizer}
/>
diff --git a/packages/core/client/src/schema-component/antd/calendar/Title.tsx b/packages/core/client/src/schema-component/antd/calendar/Title.tsx
index 379a6a70f..bd709f1bf 100644
--- a/packages/core/client/src/schema-component/antd/calendar/Title.tsx
+++ b/packages/core/client/src/schema-component/antd/calendar/Title.tsx
@@ -1,14 +1,26 @@
import { observer } from '@formily/react';
-import React, { useContext } from 'react';
+import moment from 'moment';
+import React, { useContext, useMemo } from 'react';
+import solarLunar from 'solarlunar-es';
import { useDesignable } from '../../hooks';
import { CalendarToolbarContext } from './context';
+import { getLunarDay } from './utils';
export const Title = observer(() => {
const { DesignableBar } = useDesignable();
- const { label } = useContext(CalendarToolbarContext);
+ const { date, view, label, showLunar } = useContext(CalendarToolbarContext);
+
+ const lunarElement = useMemo(() => {
+ if (!showLunar || view !== 'day') {
+ return;
+ }
+ return {getLunarDay(date)};
+ }, [view, date, showLunar]);
+
return (
- {label}
+ {label}
+ {lunarElement}
);
diff --git a/packages/core/client/src/schema-component/antd/calendar/components/Header.tsx b/packages/core/client/src/schema-component/antd/calendar/components/Header.tsx
new file mode 100644
index 000000000..9de5798d6
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/calendar/components/Header.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import moment from 'moment';
+import { useMemo } from 'react';
+import solarLunar from 'solarlunar-es';
+import { getLunarDay } from '../utils';
+
+const Header = ({ date, label, drilldownView, onDrillDown, showLunar = false, type, localizer }) => {
+ const lunarElement = useMemo(() => {
+ if (!showLunar) {
+ return;
+ }
+ return {getLunarDay(date)};
+ }, [date, showLunar]);
+
+ const child = useMemo(() => {
+ if (type === 'week') {
+ return (
+
+
{localizer.format(date, 'ddd')}
+
+ {localizer.format(date, 'DD')}
+ {lunarElement}
+
+
+ );
+ } else {
+ return (
+ <>
+ {label}
+ {lunarElement}
+ >
+ );
+ }
+ }, [type]);
+
+ const Wrapper = drilldownView ? 'a' : React.Fragment;
+
+ return (
+
+ {child}
+
+ );
+};
+
+export default Header;
diff --git a/packages/core/client/src/schema-component/antd/calendar/style.less b/packages/core/client/src/schema-component/antd/calendar/style.less
index 8ca9367e5..0da1ebd46 100644
--- a/packages/core/client/src/schema-component/antd/calendar/style.less
+++ b/packages/core/client/src/schema-component/antd/calendar/style.less
@@ -567,6 +567,36 @@ button.rbc-input::-moz-focus-inner {
.rbc-time-header-cell {
min-height: 32px !important;
}
+.rbc-time-header-cell .rbc-header {
+ display: flex;
+}
+.rbc-time-header-cell .rbc-header.rbc-today {
+ border-color: #1890ff;
+ background-color: #e6f7ff;
+ color: #1890ff
+}
+
+.rbc-time-header-cell .rbc-header a {
+ display: flex;
+ flex-direction: column;
+}
+
+.rbc-time-header-cell .rbc-date-wrap {
+ display: flex;
+ align-items: center;
+}
+
+.rbc-time-header-cell .rbc-date-solar {
+ font-size: 18px;
+}
+.rbc-time-header-cell .rbc-date-lunar {
+ margin-left: 4px;
+}
+
+.rbc-time-header-cell .rbc-header:not(.rbc-today) .rbc-date-lunar {
+ color: #aaa;
+}
+
.rbc-calendar.view-week {
.rbc-time-header-cell {
margin-top: -32px;
@@ -709,7 +739,7 @@ button.rbc-input::-moz-focus-inner {
.rbc-time-header-content {
flex: 1;
- display: flex;
+ // display: flex;
min-width: 0;
flex-direction: column;
// border-left: 1px solid #f0f0f0;
diff --git a/packages/core/client/src/schema-component/antd/calendar/types.d.ts b/packages/core/client/src/schema-component/antd/calendar/types.d.ts
index d3f3470d3..fcb6f0104 100644
--- a/packages/core/client/src/schema-component/antd/calendar/types.d.ts
+++ b/packages/core/client/src/schema-component/antd/calendar/types.d.ts
@@ -5,4 +5,10 @@ export interface ToolbarProps {
views?: any;
onNavigate?: (action: string) => void;
onView?: (view: string) => void;
+
+ date: string;
+ /**
+ * 是否展示农历
+ */
+ showLunar: boolean;
}
diff --git a/packages/core/client/src/schema-component/antd/calendar/utils.ts b/packages/core/client/src/schema-component/antd/calendar/utils.ts
index f72d5efba..a25d2b055 100644
--- a/packages/core/client/src/schema-component/antd/calendar/utils.ts
+++ b/packages/core/client/src/schema-component/antd/calendar/utils.ts
@@ -1,4 +1,6 @@
import { get } from 'lodash';
+import moment from 'moment';
+import solarLunar from 'solarlunar-es';
import { i18n } from '../../../i18n';
export const toEvents = (data: any[], fieldNames: any) => {
@@ -11,3 +13,9 @@ export const toEvents = (data: any[], fieldNames: any) => {
};
});
};
+
+export const getLunarDay = (date: moment.MomentInput) => {
+ const md = moment(date);
+ const result = solarLunar.solar2lunar(md.year(), md.month() + 1, md.date());
+ return typeof result !== 'number' ? result.lunarFestival || result.term || result.dayCn : result;
+};