quantum/qcal
1
0
Fork 0
mirror of https://github.com/quantum5/qcal.git synced 2025-07-26 19:34:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

mcal: add labels for different information

Browse source
This commit is contained in:
Quantum 2025-07-14 00:19:03 -04:00
parent 1fd038e900
commit 2c352f880c
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
mcal/src/Calendar.tsx
View file

@ -14,6 +14,7 @@ import {
jdnHaabExt,
jdnLordOfNight, jdnTzolkin,
} from '@common/mayan';
import {useMobileTooltipProps} from '@common/ui/MobileTooltip';
type MonthProps = {
year: HaabYear;
@ -26,12 +27,21 @@ type DateProps = MonthProps & {
function Day({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element {
const jdn = haabExtJDN({year, month, day});
const mobile = useMobileTooltipProps();
return <div className={`Day ${jdn === todayJDN ? 'Day-today' : ''}`}>
<div className="Day-name">{day}<span className="Day-haabMonth"> {haabNames[month]}</span></div>
<div className="Day-tzolkin">{formatTzolkin(jdnTzolkin(jdn))}</div>
<div className="Day-lc">{jdnLongCount(jdn)?.join('.')}</div>
<div className="Day-lordOfNight">{formatLordOfNight(jdnLordOfNight(jdn))}</div>
<div className="Day-gregorian">{jdnDate(jdn).toDateString()}</div>
<div className="Day-tzolkin">
<abbr title="Tzolkʼin" {...mobile}>T.</abbr> {formatTzolkin(jdnTzolkin(jdn))}
</div>
<div className="Day-lc">
<abbr title="Long count" {...mobile}>L.</abbr> {jdnLongCount(jdn)?.join('.')}
</div>
<div className="Day-lordOfNight">
<abbr title="Lord of the Night" {...mobile}>N.</abbr> {formatLordOfNight(jdnLordOfNight(jdn))
}</div>
<div className="Day-gregorian">
<abbr title="Gregorian date" {...mobile}>G.</abbr> {jdnDate(jdn).toDateString()}
</div>
</div>;
}