feat: highlight current date

.gitignore

@@ -6,3 +6,5 @@ cypress/results/*
 cypress/reports/*
 cypress/screenshots/*
 cypress/videos/*
+
+playwright-report

e2e/spec.spec.js

@@ -176,4 +176,29 @@ test.describe('basic', () => {
       'Selected: None'
     )
   })
+
+  test('should highlight today when highlightToday is enabled', async ({
+    page,
+  }) => {
+    await page.goto('/')
+
+    const today = new Date()
+    const todayISO = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate()
+    ).toISOString()
+
+    // Highlight today should be enabled by default
+    await expect(page.locator(`[data-date="${todayISO}"]`)).toHaveClass(
+      /preachjs-calendar--grid-cell-today/
+    )
+
+    // Toggle off highlight today
+    await page.locator('[name="highlight-today"]').click()
+
+    await expect(page.locator(`[data-date="${todayISO}"]`)).not.toHaveClass(
+      /preachjs-calendar--grid-cell-today/
+    )
+  })
 })

example/src/main.css

@@ -275,6 +275,14 @@ button {
   background: #efefef;
 }
 
+.preachjs-calendar
+  .preachjs-calendar--grid
+  .preachjs-calendar--grid-body
+  .preachjs-calendar--grid-cell.preachjs-calendar--grid-cell-today
+  button {
+  border: 1px solid black;
+}
+
 .preachjs-calendar
   .preachjs-calendar--grid
   .preachjs-calendar--grid-body

example/src/main.js

@@ -8,6 +8,7 @@ const selectedDate = signal()
 const readOnly = signal(false)
 const minDate = signal()
 const maxDate = signal()
+const highlightToday = signal(true)
 
 function parseDateInput(value) {
   if (!value) return undefined
@@ -81,13 +82,23 @@ const App = () => {
               }}
             />
           </label>
+          <label>
+            <input
+              name="highlight-today"
+              type="checkbox"
+              checked={highlightToday.value}
+              onChange={e => (highlightToday.value = e.target.checked)}
+            />{' '}
+            Highlight Today
+          </label>
         </div>
         <Calendar
           mode={mode.value}
           readOnly={readOnly.value}
           value={selectedDate.value}
           min={minDate.value}
           max={maxDate.value}
+          highlightToday={highlightToday.value}
           onSelect={value => {
             selectedDate.value = value
           }}

src/calendar.d.ts

@@ -18,4 +18,5 @@ export type CalendarProps<M extends CalendarMode = CalendarMode> = {
   onSelect?: (nextValue: CalendarValue<M>) => void
   min?: Date
   max?: Date
+  highlightToday?: boolean
 }

src/calendar.js

@@ -27,6 +27,7 @@ export function Calendar({
   arrowRight: ArrowRight = () => <>&gt;</>,
   min = undefined,
   max = undefined,
+  highlightToday = false,
 }) {
   const selecting = useRef(false)
   const refRange$ = useSignal([])
@@ -192,13 +193,18 @@ export function Calendar({
                     }
                   }
 
+                  const isToday =
+                    highlightToday &&
+                    dateItem.date.toDateString() === new Date().toDateString()
+
                   const gridCellStyles = [
                     'preachjs-calendar--grid-cell',
                     readOnly && 'read-only',
                     isDateActive && 'active',
                     isRangeStart && 'preachjs-calendar--grid-cell-start',
                     isInRange && 'preachjs-calendar--grid-cell-in-range',
                     isRangeEnd && 'preachjs-calendar--grid-cell-end',
+                    isToday && 'preachjs-calendar--grid-cell-today',
                   ]
 
                   const isDisabled =