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: display Tzolkin and Haab month names

Browse source
This commit is contained in:
Quantum 2025-07-13 15:44:15 -04:00
parent 697ffe9ccd
commit 2e007500c9
1 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
mcal/src/Calendar.tsx
View file

@ -4,7 +4,7 @@ import {jdnDate} from '@common/gregorian';
import {jdnLongCount} from '@common/longCount'; import {jdnLongCount} from '@common/longCount';
import {MonthBasedCalendar} from '@common/ui/MonthBasedCalendar'; import {MonthBasedCalendar} from '@common/ui/MonthBasedCalendar';
import { import {
formatLordOfNight, formatLordOfNight, formatTzolkin,
HaabDay, HaabDay,
haabExtJDN, haabExtJDN,
HaabMonth, HaabMonth,
@ -12,7 +12,7 @@ import {
haabNames, haabNames,
HaabYear, HaabYear,
jdnHaabExt, jdnHaabExt,
jdnLordOfNight, jdnLordOfNight, jdnTzolkin,
} from '@common/mayan'; } from '@common/mayan';
type MonthProps = { type MonthProps = {
@ -24,21 +24,22 @@ type DateProps = MonthProps & {
day: HaabDay; day: HaabDay;
}; };
function NormalDay({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element { function Day({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element {
const jdn = haabExtJDN({year, month, day}); const jdn = haabExtJDN({year, month, day});
return <div className={`Day ${jdn === todayJDN ? 'Day-today' : ''}`}> return <div className={`Day ${jdn === todayJDN ? 'Day-today' : ''}`}>
<div className="Day-name">{day}</div> <div className="Day-name">{day}<span className="Day-haabMonth"> {haabNames[month]}</span></div>
<div className="DayDetail-lc">{jdnLongCount(jdn)?.join('.')}</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-lordOfNight">{formatLordOfNight(jdnLordOfNight(jdn))}</div>
<div className="DayDetail-gregorian">{jdnDate(jdn).toDateString()}</div> <div className="Day-gregorian">{jdnDate(jdn).toDateString()}</div>
</div>; </div>;
} }
function Month({year, month, todayJDN}: MonthProps & { todayJDN: number }): JSX.Element { function Month({year, month, todayJDN}: MonthProps & { todayJDN: number }): JSX.Element {
return <div className="Month"> return <div className="Month">
<div className="Month-days">{ <div className="Month-days">{
Array.from(Array(haabMonthDays(month)).keys()).map(i => <div key={i} className="DayOuter NormalDay"> Array.from(Array(haabMonthDays(month)).keys()).map(i => <div key={i} className="DayOuter">
<NormalDay year={year} month={month} day={i + 1 as HaabDay} todayJDN={todayJDN}/> <Day year={year} month={month} day={i + 1 as HaabDay} todayJDN={todayJDN}/>
</div>) </div>)
}</div> }</div>
</div>; </div>;