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 * 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 <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) {
|
||||
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) => <DateHeader {...props} showLunar={showLunar}></DateHeader>,
|
||||
toolbar: (props) => <Toolbar {...props} showLunar={showLunar}></Toolbar>,
|
||||
week: {
|
||||
header: (props) => <Header {...props} type="week" showLunar={showLunar}></Header>,
|
||||
},
|
||||
month: {
|
||||
dateHeader: (props) => <Header {...props} showLunar={showLunar}></Header>,
|
||||
},
|
||||
}}
|
||||
localizer={localizer}
|
||||
/>
|
||||
|
@ -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 <span>{getLunarDay(date)}</span>;
|
||||
}, [view, date, showLunar]);
|
||||
|
||||
return (
|
||||
<div className="ant-btn-group" style={{ fontSize: '1.75em', fontWeight: 300 }}>
|
||||
{label}
|
||||
<span>{label}</span>
|
||||
<span style={{ marginLeft: '4px' }}>{lunarElement}</span>
|
||||
<DesignableBar />
|
||||
</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 {
|
||||
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;
|
||||
|
@ -5,4 +5,10 @@ export interface ToolbarProps {
|
||||
views?: any;
|
||||
onNavigate?: (action: string) => void;
|
||||
onView?: (view: string) => void;
|
||||
|
||||
date: string;
|
||||
/**
|
||||
* 是否展示农历
|
||||
*/
|
||||
showLunar: boolean;
|
||||
}
|
||||
|
@ -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;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user