feat: support show lunar day in week and day (#977)
Co-authored-by: qing <qing@imideMacBook-Air.local>
This commit is contained in:
parent
e7853c724e
commit
ed6f9a0867
@ -7,40 +7,17 @@ import React, { useMemo, useState } from 'react';
|
|||||||
import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
|
import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
|
||||||
import * as dates from 'react-big-calendar/lib/utils/dates';
|
import * as dates from 'react-big-calendar/lib/utils/dates';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import solarLunar from 'solarlunar-es';
|
|
||||||
import { RecordProvider } from '../../../';
|
import { RecordProvider } from '../../../';
|
||||||
import { i18n } from '../../../i18n';
|
import { i18n } from '../../../i18n';
|
||||||
import { useProps } from '../../hooks/useProps';
|
import { useProps } from '../../hooks/useProps';
|
||||||
import { ActionContext } from '../action';
|
import { ActionContext } from '../action';
|
||||||
|
import Header from './components/Header';
|
||||||
import { CalendarToolbarContext } from './context';
|
import { CalendarToolbarContext } from './context';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import type { ToolbarProps } from './types';
|
import type { ToolbarProps } from './types';
|
||||||
|
|
||||||
const localizer = momentLocalizer(moment);
|
const localizer = momentLocalizer(moment);
|
||||||
|
|
||||||
const DateHeader = ({ date, label, drilldownView, onDrillDown, showLunar = false }) => {
|
|
||||||
if (!drilldownView) {
|
|
||||||
return <span>{label}</span>;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 <span className="rbc-date-lunar">{lunarDay}</span>;
|
|
||||||
}, [date, showLunar]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<a onClick={onDrillDown} role="cell">
|
|
||||||
<span className="rbc-date-solar">{label}</span>
|
|
||||||
{lunarElement}
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function Toolbar(props: ToolbarProps) {
|
function Toolbar(props: ToolbarProps) {
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const toolBarSchema: Schema = useMemo(
|
const toolBarSchema: Schema = useMemo(
|
||||||
@ -172,8 +149,13 @@ export const Calendar: any = observer((props: any) => {
|
|||||||
}}
|
}}
|
||||||
defaultDate={new Date()}
|
defaultDate={new Date()}
|
||||||
components={{
|
components={{
|
||||||
toolbar: Toolbar,
|
toolbar: (props) => <Toolbar {...props} showLunar={showLunar}></Toolbar>,
|
||||||
dateHeader: (props) => <DateHeader {...props} showLunar={showLunar}></DateHeader>,
|
week: {
|
||||||
|
header: (props) => <Header {...props} type="week" showLunar={showLunar}></Header>,
|
||||||
|
},
|
||||||
|
month: {
|
||||||
|
dateHeader: (props) => <Header {...props} showLunar={showLunar}></Header>,
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
localizer={localizer}
|
localizer={localizer}
|
||||||
/>
|
/>
|
||||||
|
@ -1,14 +1,26 @@
|
|||||||
import { observer } from '@formily/react';
|
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 { useDesignable } from '../../hooks';
|
||||||
import { CalendarToolbarContext } from './context';
|
import { CalendarToolbarContext } from './context';
|
||||||
|
import { getLunarDay } from './utils';
|
||||||
|
|
||||||
export const Title = observer(() => {
|
export const Title = observer(() => {
|
||||||
const { DesignableBar } = useDesignable();
|
const { DesignableBar } = useDesignable();
|
||||||
const { label } = useContext(CalendarToolbarContext);
|
const { date, view, label, showLunar } = useContext(CalendarToolbarContext);
|
||||||
|
|
||||||
|
const lunarElement = useMemo(() => {
|
||||||
|
if (!showLunar || view !== 'day') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return <span>{getLunarDay(date)}</span>;
|
||||||
|
}, [view, date, showLunar]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="ant-btn-group" style={{ fontSize: '1.75em', fontWeight: 300 }}>
|
<div className="ant-btn-group" style={{ fontSize: '1.75em', fontWeight: 300 }}>
|
||||||
{label}
|
<span>{label}</span>
|
||||||
|
<span style={{ marginLeft: '4px' }}>{lunarElement}</span>
|
||||||
<DesignableBar />
|
<DesignableBar />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -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 <span className="rbc-date-lunar">{getLunarDay(date)}</span>;
|
||||||
|
}, [date, showLunar]);
|
||||||
|
|
||||||
|
const child = useMemo(() => {
|
||||||
|
if (type === 'week') {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<span>{localizer.format(date, 'ddd')}</span>
|
||||||
|
<div className="rbc-date-wrap">
|
||||||
|
<span className="rbc-date-solar">{localizer.format(date, 'DD')}</span>
|
||||||
|
{lunarElement}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<span className="rbc-date-solar">{label}</span>
|
||||||
|
{lunarElement}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [type]);
|
||||||
|
|
||||||
|
const Wrapper = drilldownView ? 'a' : React.Fragment;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Wrapper onClick={onDrillDown} role="cell">
|
||||||
|
{child}
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
@ -567,6 +567,36 @@ button.rbc-input::-moz-focus-inner {
|
|||||||
.rbc-time-header-cell {
|
.rbc-time-header-cell {
|
||||||
min-height: 32px !important;
|
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-calendar.view-week {
|
||||||
.rbc-time-header-cell {
|
.rbc-time-header-cell {
|
||||||
margin-top: -32px;
|
margin-top: -32px;
|
||||||
@ -709,7 +739,7 @@ button.rbc-input::-moz-focus-inner {
|
|||||||
|
|
||||||
.rbc-time-header-content {
|
.rbc-time-header-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
// display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// border-left: 1px solid #f0f0f0;
|
// border-left: 1px solid #f0f0f0;
|
||||||
|
@ -5,4 +5,10 @@ export interface ToolbarProps {
|
|||||||
views?: any;
|
views?: any;
|
||||||
onNavigate?: (action: string) => void;
|
onNavigate?: (action: string) => void;
|
||||||
onView?: (view: string) => void;
|
onView?: (view: string) => void;
|
||||||
|
|
||||||
|
date: string;
|
||||||
|
/**
|
||||||
|
* 是否展示农历
|
||||||
|
*/
|
||||||
|
showLunar: boolean;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
import { get } from 'lodash';
|
import { get } from 'lodash';
|
||||||
|
import moment from 'moment';
|
||||||
|
import solarLunar from 'solarlunar-es';
|
||||||
import { i18n } from '../../../i18n';
|
import { i18n } from '../../../i18n';
|
||||||
|
|
||||||
export const toEvents = (data: any[], fieldNames: any) => {
|
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;
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user