feat: support show lunar day in week and day (#977)

Co-authored-by: qing <qing@imideMacBook-Air.local>
This commit is contained in:
Dunqing 2022-10-29 14:14:21 +08:00 committed by chenos
parent e7853c724e
commit ed6f9a0867
6 changed files with 113 additions and 30 deletions

View File

@ -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}
/>

View File

@ -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>
);

View File

@ -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;

View File

@ -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;

View File

@ -5,4 +5,10 @@ export interface ToolbarProps {
views?: any;
onNavigate?: (action: string) => void;
onView?: (view: string) => void;
date: string;
/**
*
*/
showLunar: boolean;
}

View File

@ -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;
};