mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

demo: optimize calendar demo (#48939)

Browse Source
This commit is contained in:
kiner-tang 2024-05-15 21:30:17 +08:00 committed by GitHub
parent 356ead5919
commit 9744ab6501
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/calendar/demo/lunar.tsx
View File

@ -82,6 +82,12 @@ const useStyle = createStyles(({ token, css, cx }) => {
opacity: 0.8;
}
`,
weekend: css`
color: ${token.colorError};
`,
gray: css`
filter: grayscale(1);
`,
};
});
@ -104,6 +110,7 @@ const App: React.FC = () => {
const d = Lunar.fromDate(date.toDate());
const lunar = d.getDayInChinese();
const solarTerm = d.getJieQi();
const isWeekend = date.day() === 6 || date.day() === 0;
const h = HolidayUtil.getHoliday(date.get('year'), date.get('month') + 1, date.get('date'));
const displayHoliday = h?.getTarget() === h?.getDay() ? h?.getName() : undefined;
if (info.type === 'date') {
@ -115,7 +122,14 @@ const App: React.FC = () => {
}),
children: (
<div className={styles.text}>
{date.get('date')}
<span
className={classNames({
[styles.weekend]: isWeekend,
[styles.gray]: !info.today.isSame(date, 'M'),
})}
>
{date.get('date')}
</span>
{info.type === 'date' && (
<div className={styles.lunar}>{displayHoliday || solarTerm || lunar}</div>
)}