Highlight today's date

src/App.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import './App.css';
 import {Calendar} from './Calendar';
+import {gregorianJDN} from "./dates";
 
 function App() {
+  const today = new Date();
+  const todayJDN = gregorianJDN(today.getFullYear(), today.getMonth() + 1, today.getDay());
   return (
-    <Calendar year={230} month={5} day={24}/>
+    <Calendar year={230} month={5} day={24} todayJDN={todayJDN}/>
   );
 }
 

src/Calendar.scss

@@ -34,6 +34,10 @@
         display: block;
         @include make-row();
     }
+
+    .Day-decade {
+        display: none;
+    }
 }
 
 .Day, .DecadeName {
@@ -57,3 +61,11 @@
     font-size: 2em;
     font-weight: 600;
 }
+
+.Day-decade {
+    font-weight: 600;
+}
+
+.Day-today {
+    background: $gray-300;
+}

src/Calendar.tsx

@@ -14,6 +14,7 @@ type DateProps = MonthProps & {
 export type CalendarProps = DateProps & {
     year: number;
     month: Month;
+    todayJDN: number;
     onSwitch?: (year: number, month: Month, day: Day) => void,
 };
 
@@ -30,22 +31,24 @@ function DayDetail({jdn}: { jdn: number }): JSX.Element {
     </div>;
 }
 
-function NormalDay({year, month, day, isToday}: DateProps & { isToday: boolean }): JSX.Element {
-    return <div className={`Day NormalDay ${isToday ? 'Day-today' : ''}`}>
+function NormalDay({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element {
+    const jdn = frJDN(year, month, day);
+    console.log(year, month, day, jdn, todayJDN);
+    return <div className={`Day NormalDay ${jdn === todayJDN ? 'Day-today' : ''}`}>
         <div className="Day-name">{day}</div>
         <div className="Day-decade">{decadeNames[(day - 1) % 10]}</div>
-        <DayDetail jdn={frJDN(year, month, day)}/>
+        <DayDetail jdn={jdn}/>
     </div>;
 }
 
-function NormalMonth({year, month}: MonthProps): JSX.Element {
+function NormalMonth({year, month, todayJDN}: MonthProps & { todayJDN: number }): JSX.Element {
     const decadeHeads = decadeNames.map(name => <DecadeName name={name}/>);
     return <div className="Month">
         <div className="Month-decadeHead">{decadeHeads}</div>
         <div className="Month-decades">{
             Array.from(Array(3).keys()).map(i => <div className="Month-decade">{
                 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} todayJDN={todayJDN}/>
                     {j === 4 && <div className="Month-decadeSplitter"/>}
                 </>)
             }</div>)
@@ -55,6 +58,6 @@ function NormalMonth({year, month}: MonthProps): JSX.Element {
 
 export class Calendar extends React.Component<CalendarProps, CalendarState> {
     render(): JSX.Element {
-        return <NormalMonth year={this.props.year} month={this.props.month}/>;
+        return <NormalMonth year={this.props.year} month={this.props.month} todayJDN={this.props.todayJDN}/>;
     }
 }

src/dates.test.ts

@@ -32,22 +32,22 @@ describe('frJDN', () => {
 
 describe('jdnGregorian', () => {
     it('works', () => {
-        expect(jdnGregorian(0)).toEqual(new Date(-4713, 11, 24));
-        expect(jdnGregorian(2299160)).toEqual(new Date(1582, 10, 14));
-        expect(jdnGregorian(2299161)).toEqual(new Date(1582, 10, 15));
-        expect(jdnGregorian(2361221)).toEqual(new Date(1752, 9, 13));
-        expect(jdnGregorian(2361222)).toEqual(new Date(1752, 9, 14));
-        expect(jdnGregorian(2451545)).toEqual(new Date(2000, 1, 1));
-        expect(jdnGregorian(-8512316)).toEqual(new Date(-28019, 12, 20));
-        expect(jdnGregorian(-8534852)).toEqual(new Date(-28080, 4, 8));
-        expect(jdnGregorian(2653462)).toEqual(new Date(2552, 10, 30));
-        expect(jdnGregorian(3271156)).toEqual(new Date(4244, 1, 8));
-        expect(jdnGregorian(-666477)).toEqual(new Date(-6537, 2, 23));
-        expect(jdnGregorian(2397854)).toEqual(new Date(1852, 12, 31));
-        expect(jdnGregorian(-1211235)).toEqual(new Date(-8029, 8, 26));
-        expect(jdnGregorian(-91680)).toEqual(new Date(-4964, 11, 20));
-        expect(jdnGregorian(-5605876)).toEqual(new Date(-20061, 7, 14));
-        expect(jdnGregorian(-295121)).toEqual(new Date(-5521, 11, 19));
+        expect(jdnGregorian(0)).toEqual(new Date(-4713, 10, 24));
+        expect(jdnGregorian(2299160)).toEqual(new Date(1582, 9, 14));
+        expect(jdnGregorian(2299161)).toEqual(new Date(1582, 9, 15));
+        expect(jdnGregorian(2361221)).toEqual(new Date(1752, 8, 13));
+        expect(jdnGregorian(2361222)).toEqual(new Date(1752, 8, 14));
+        expect(jdnGregorian(2451545)).toEqual(new Date(2000, 0, 1));
+        expect(jdnGregorian(-8512316)).toEqual(new Date(-28019, 11, 20));
+        expect(jdnGregorian(-8534852)).toEqual(new Date(-28080, 3, 8));
+        expect(jdnGregorian(2653462)).toEqual(new Date(2552, 9, 30));
+        expect(jdnGregorian(3271156)).toEqual(new Date(4244, 0, 8));
+        expect(jdnGregorian(-666477)).toEqual(new Date(-6537, 1, 23));
+        expect(jdnGregorian(2397854)).toEqual(new Date(1852, 11, 31));
+        expect(jdnGregorian(-1211235)).toEqual(new Date(-8029, 7, 26));
+        expect(jdnGregorian(-91680)).toEqual(new Date(-4964, 10, 20));
+        expect(jdnGregorian(-5605876)).toEqual(new Date(-20061, 6, 14));
+        expect(jdnGregorian(-295121)).toEqual(new Date(-5521, 10, 19));
     });
 });
 

src/dates.ts

@@ -93,7 +93,7 @@ export function jdnGregorian(jdn: number): Date {
     const day = Math.floor((h % 153 + 153) % 153 / 5) + 1;
     const month = (Math.floor(h / 153) + 2) % 12 + 1;
     const year = Math.floor(e / 1461) - 4716 + Math.floor((14 - month) / 12);
-    return new Date(year, month, day);
+    return new Date(year, month - 1, day);
 }
 
 export function jdnLongCount(jdn: number): string | null {