quantum/qcal
1
0
Fork 0
mirror of https://github.com/quantum5/qcal.git synced 2025-04-25 02:01:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

Display Gregorian date

Browse source
This commit is contained in:
Quantum 2022-02-12 13:27:14 -05:00
parent 0c039a04c4
commit c13e819592
1 changed files with 13 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/Calendar.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {Day, decadeNames, frJDN, Month} from './dates'; import {Day, decadeNames, frJDN, jdnGregorian, Month} from './dates';
type MonthProps = { type MonthProps = {
year: number; year: number;
@ -19,35 +19,34 @@ export type CalendarProps = DateProps & {
type CalendarState = {}; type CalendarState = {};
function DecadeName({name}: { name: string }): JSX.Element { function DecadeName({name}: { name: string }): JSX.Element {
return <th className="DecadeName">{name}</th>; return <div className="DecadeName">{name}</div>;
} }
function DayDetail({jdn}: { jdn: number }): JSX.Element { function DayDetail({jdn}: { jdn: number }): JSX.Element {
return <div className="DayDetail"> return <div className="DayDetail">
<div className="DayDetail-gregorian">{}</div> <div className="DayDetail-gregorian">{jdnGregorian(jdn).toDateString()}</div>
</div>; </div>;
} }
function NormalDay({year, month, day, isToday}: DateProps & { isToday: boolean }): JSX.Element { function NormalDay({year, month, day, isToday}: DateProps & { isToday: boolean }): JSX.Element {
return <td className={`Day NormalDay ${isToday ? 'Day-today' : ''}`}> return <div className={`Day NormalDay ${isToday ? 'Day-today' : ''}`}>
<div className="Day-name">{day}</div> <div className="Day-name">{day}</div>
<div className="Day-decade">{decadeNames[(day - 1) % 10]}</div>
<DayDetail jdn={frJDN(year, month, day)}/> <DayDetail jdn={frJDN(year, month, day)}/>
</td>; </div>;
} }
function NormalMonth({year, month}: MonthProps): JSX.Element { function NormalMonth({year, month}: MonthProps): JSX.Element {
const decadeHeads = decadeNames.map(name => <DecadeName name={name}/>); const decadeHeads = decadeNames.map(name => <DecadeName name={name}/>);
return <table> return <div className="Month">
<thead> <div className="Month-decadeHead">{decadeHeads}</div>
<tr className="Month-decadeHead">{decadeHeads}</tr> <div className="Month-decades">{
</thead> Array.from(Array(3).keys()).map(i => <div className="Month-decade">{
<tbody>{
Array.from(Array(3).keys()).map(i => <tr className="Month-decade">{
Array.from(Array(10).keys()).map(j => Array.from(Array(10).keys()).map(j =>
<NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} isToday={false}/>) <NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} isToday={false}/>)
}</tr>) }</div>)
}</tbody> }</div>
</table>; </div>;
} }
export class Calendar extends React.Component<CalendarProps, CalendarState> { export class Calendar extends React.Component<CalendarProps, CalendarState> {