react-yearly-calendar-grid 0.4.0 → 0.5.0

package/README.ja.md

@@ -0,0 +1,227 @@
+# react-yearly-calendar-grid
+
+年間カレンダーを表示するReactコンポーネント。ドラッグ&ドロップでイベントの移動・リサイズが可能。
+
+[English](./README.md)
+
+## インストール
+
+```bash
+npm install react-yearly-calendar-grid
+```
+
+## 基本的な使い方
+
+```tsx
+import { YearlyCalendar, CalendarEvent } from 'react-yearly-calendar-grid';
+
+const events: CalendarEvent[] = [
+  {
+    id: '1',
+    date: new Date(2026, 0, 15),
+    title: '会議',
+    category: 'work',
+  },
+  {
+    id: '2',
+    date: new Date(2026, 1, 10),
+    endDate: new Date(2026, 1, 14),
+    title: '出張',
+    category: 'travel',
+  },
+];
+
+const categoryColors = {
+  work: '#2563eb',
+  travel: '#16a34a',
+};
+
+function App() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <YearlyCalendar
+        year={2026}
+        events={events}
+        categoryColors={categoryColors}
+        onEventClick={(event) => console.log('Clicked:', event)}
+        onDateClick={(date, events) => console.log('Date:', date, events)}
+        onEventMove={(event, newStart, newEnd) => {
+          console.log('Moved:', event.title, 'to', newStart);
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | 型 | 必須 | 説明 |
+|------|-----|------|------|
+| `year` | `number` | ○ | 表示する年 |
+| `events` | `CalendarEvent[]` | - | イベント配列 |
+| `holidays` | `Holiday[]` | - | 祝日配列 |
+| `categoryColors` | `Record<string, string>` | - | カテゴリごとの色 |
+| `theme` | `ThemeColors` | - | テーマカラー設定 |
+| `highlightRange` | `{ start: Date; end: Date } \| null` | - | ハイライトする日付範囲 |
+| `onDateClick` | `(date: Date, events: CalendarEvent[]) => void` | - | 日付クリック時 |
+| `onDateDoubleClick` | `(date: Date, events: CalendarEvent[]) => void` | - | 日付ダブルクリック時 |
+| `onDateRangeSelect` | `(startDate: Date, endDate: Date) => void` | - | 日付範囲選択時 |
+| `onEventClick` | `(event: CalendarEvent) => void` | - | イベントクリック時 |
+| `onEventMove` | `(event, newStartDate, newEndDate) => void` | - | イベント移動/リサイズ時 |
+
+## CalendarEvent
+
+```ts
+interface CalendarEvent {
+  id: string;          // 一意のID
+  date: Date;          // 開始日
+  endDate?: Date;      // 終了日（複数日イベントの場合）
+  title: string;       // タイトル
+  color?: string;      // 個別の色（categoryColorsより優先）
+  category?: string;   // カテゴリ（categoryColorsで色を指定）
+}
+```
+
+## Holiday
+
+```ts
+interface Holiday {
+  date: Date;   // 祝日の日付
+  name: string; // 祝日名
+}
+```
+
+### 祝日の使用例
+
+```tsx
+import { YearlyCalendar, Holiday } from 'react-yearly-calendar-grid';
+
+const holidays: Holiday[] = [
+  { date: new Date(2026, 0, 1), name: '元日' },
+  { date: new Date(2026, 0, 12), name: '成人の日' },
+  { date: new Date(2026, 1, 11), name: '建国記念の日' },
+  { date: new Date(2026, 1, 23), name: '天皇誕生日' },
+  { date: new Date(2026, 2, 20), name: '春分の日' },
+  { date: new Date(2026, 3, 29), name: '昭和の日' },
+  { date: new Date(2026, 4, 3), name: '憲法記念日' },
+  { date: new Date(2026, 4, 4), name: 'みどりの日' },
+  { date: new Date(2026, 4, 5), name: 'こどもの日' },
+  { date: new Date(2026, 6, 20), name: '海の日' },
+  { date: new Date(2026, 7, 11), name: '山の日' },
+  { date: new Date(2026, 8, 21), name: '敬老の日' },
+  { date: new Date(2026, 8, 23), name: '秋分の日' },
+  { date: new Date(2026, 9, 12), name: 'スポーツの日' },
+  { date: new Date(2026, 10, 3), name: '文化の日' },
+  { date: new Date(2026, 10, 23), name: '勤労感謝の日' },
+];
+
+function App() {
+  return (
+    <YearlyCalendar
+      year={2026}
+      holidays={holidays}
+      theme={{
+        bgHoliday: '#fef2f2', // 祝日の背景色
+      }}
+    />
+  );
+}
+```
+
+## 機能
+
+### ドラッグ&ドロップ
+イベントをドラッグして別の日に移動できます。複数日イベントは期間を維持したまま移動します。
+
+### リサイズ
+複数日イベントの上端/下端をドラッグして期間を伸縮できます。
+
+### 月またぎ表示
+複数月にまたがるイベントは各月に連続して表示されます。
+
+### 日付範囲選択
+日付をドラッグして範囲を選択できます。
+
+## テーマカスタマイズ
+
+```tsx
+<YearlyCalendar
+  year={2026}
+  events={events}
+  theme={{
+    bgSunday: '#ffe4e6',       // 日曜日の背景色
+    bgSaturday: '#e0f2fe',     // 土曜日の背景色
+    bgHoliday: '#fef2f2',      // 祝日の背景色
+    buttonPrimary: '#059669',  // ボタン色
+    tooltipBg: '#1f2937',      // ツールチップ背景
+  }}
+/>
+```
+
+### ThemeColors
+
+| プロパティ | 説明 | デフォルト |
+|-----------|------|-----------|
+| `bgWhite` | 通常セル背景 | `#ffffff` |
+| `bgGray50` | ホバー時背景 | `#f9fafb` |
+| `bgGray100` | ヘッダー背景 | `#f3f4f6` |
+| `bgSunday` | 日曜日背景 | `#fef2f2` |
+| `bgSaturday` | 土曜日背景 | `#eff6ff` |
+| `bgHoliday` | 祝日背景 | `#fef2f2` |
+| `bgDropHighlight` | ドロップ先ハイライト | `rgba(191, 219, 254, 0.5)` |
+| `borderDefault` | ボーダー色 | `#d1d5db` |
+| `borderDropHighlight` | ドロップ先ボーダー | `#3b82f6` |
+| `textPrimary` | メインテキスト | `#111827` |
+| `textSecondary` | サブテキスト | `#4b5563` |
+| `textMuted` | 薄いテキスト | `#6b7280` |
+| `tooltipBg` | ツールチップ背景 | `#111827` |
+| `tooltipText` | ツールチップ文字 | `#ffffff` |
+| `buttonPrimary` | ボタン背景 | `#2563eb` |
+| `buttonPrimaryHover` | ボタンホバー | `#1d4ed8` |
+| `floatingDateBg` | ドラッグ中日付表示 | `#2563eb` |
+| `resizeFloatingBg` | リサイズ中日付表示 | `#9333ea` |
+
+## イベント移動の実装例
+
+```tsx
+import { useState, useCallback } from 'react';
+import { YearlyCalendar, CalendarEvent } from 'react-yearly-calendar-grid';
+
+function App() {
+  const [events, setEvents] = useState<CalendarEvent[]>([
+    { id: '1', date: new Date(2026, 0, 15), title: '予定1' },
+  ]);
+
+  const handleEventMove = useCallback(
+    (event: CalendarEvent, newStartDate: Date, newEndDate: Date | undefined) => {
+      setEvents((prev) =>
+        prev.map((e) =>
+          e.id === event.id
+            ? { ...e, date: newStartDate, endDate: newEndDate }
+            : e
+        )
+      );
+    },
+    []
+  );
+
+  return (
+    <YearlyCalendar
+      year={2026}
+      events={events}
+      onEventMove={handleEventMove}
+    />
+  );
+}
+```
+
+## 注意点
+
+- コンテナに高さを指定してください（`height: 100vh` など）
+- カレンダーは親要素いっぱいに広がります
+- 依存ライブラリなし（React/ReactDOM のみ peerDependency）
+
+## License
+
+MIT

package/README.md

@@ -1,14 +1,16 @@
 # react-yearly-calendar-grid
 
-年間カレンダーを表示するReactコンポーネント。ドラッグ&ドロップでイベントの移動・リサイズが可能。
+A React component that displays a yearly calendar grid. Supports drag & drop for moving and resizing events.
 
-## インストール
+[Japanese / 日本語](./README.ja.md)
+
+## Installation
 
 ```bash
 npm install react-yearly-calendar-grid
 ```
 
-## 基本的な使い方
+## Basic Usage
 
 ```tsx
 import { YearlyCalendar, CalendarEvent } from 'react-yearly-calendar-grid';
@@ -17,14 +19,14 @@ const events: CalendarEvent[] = [
   {
     id: '1',
     date: new Date(2026, 0, 15),
-    title: '会議',
+    title: 'Meeting',
     category: 'work',
   },
   {
     id: '2',
     date: new Date(2026, 1, 10),
     endDate: new Date(2026, 1, 14),
-    title: '出張',
+    title: 'Business Trip',
     category: 'travel',
   },
 ];
@@ -54,78 +56,119 @@ function App() {
 
 ## Props
 
-| Prop | 型 | 必須 | 説明 |
-|------|-----|------|------|
-| `year` | `number` | ○ | 表示する年 |
-| `events` | `CalendarEvent[]` | - | イベント配列 |
-| `categoryColors` | `Record<string, string>` | - | カテゴリごとの色 |
-| `theme` | `ThemeColors` | - | テーマカラー設定 |
-| `onDateClick` | `(date: Date, events: CalendarEvent[]) => void` | - | 日付クリック時 |
-| `onEventClick` | `(event: CalendarEvent) => void` | - | イベントクリック時 |
-| `onEventMove` | `(event, newStartDate, newEndDate) => void` | - | イベント移動/リサイズ時 |
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `year` | `number` | Yes | The year to display |
+| `events` | `CalendarEvent[]` | No | Array of events |
+| `holidays` | `Holiday[]` | No | Array of holidays |
+| `categoryColors` | `Record<string, string>` | No | Colors for each category |
+| `theme` | `ThemeColors` | No | Theme color settings |
+| `highlightRange` | `{ start: Date; end: Date } \| null` | No | Date range to highlight |
+| `onDateClick` | `(date: Date, events: CalendarEvent[]) => void` | No | Called when a date is clicked |
+| `onDateDoubleClick` | `(date: Date, events: CalendarEvent[]) => void` | No | Called when a date is double-clicked |
+| `onDateRangeSelect` | `(startDate: Date, endDate: Date) => void` | No | Called when a date range is selected |
+| `onEventClick` | `(event: CalendarEvent) => void` | No | Called when an event is clicked |
+| `onEventMove` | `(event, newStartDate, newEndDate) => void` | No | Called when an event is moved or resized |
 
 ## CalendarEvent
 
 ```ts
 interface CalendarEvent {
-  id: string;          // 一意のID
-  date: Date;          // 開始日
-  endDate?: Date;      // 終了日（複数日イベントの場合）
-  title: string;       // タイトル
-  color?: string;      // 個別の色（categoryColorsより優先）
-  category?: string;   // カテゴリ（categoryColorsで色を指定）
+  id: string;          // Unique ID
+  date: Date;          // Start date
+  endDate?: Date;      // End date (for multi-day events)
+  title: string;       // Title
+  color?: string;      // Individual color (overrides categoryColors)
+  category?: string;   // Category (use categoryColors to specify color)
+}
+```
+
+## Holiday
+
+```ts
+interface Holiday {
+  date: Date;   // Holiday date
+  name: string; // Holiday name
 }
 ```
 
-## 機能
+### Holidays Example
+
+```tsx
+import { YearlyCalendar, Holiday } from 'react-yearly-calendar-grid';
+
+const holidays: Holiday[] = [
+  { date: new Date(2026, 0, 1), name: "New Year's Day" },
+  { date: new Date(2026, 11, 25), name: 'Christmas' },
+];
+
+function App() {
+  return (
+    <YearlyCalendar
+      year={2026}
+      holidays={holidays}
+      theme={{
+        bgHoliday: '#fef2f2', // Holiday background color
+      }}
+    />
+  );
+}
+```
+
+## Features
+
+### Drag & Drop
+Drag events to move them to different dates. Multi-day events maintain their duration when moved.
 
-### ドラッグ&ドロップ
-イベントをドラッグして別の日に移動できます。複数日イベントは期間を維持したまま移動します。
+### Resize
+Drag the top or bottom edge of multi-day events to extend or shorten their duration.
 
-### リサイズ
-複数日イベントの上端/下端をドラッグして期間を伸縮できます。
+### Cross-Month Display
+Events spanning multiple months are displayed continuously across each month.
 
-### 月またぎ表示
-複数月にまたがるイベントは各月に連続して表示されます。
+### Date Range Selection
+Click and drag across dates to select a date range.
 
-## テーマカスタマイズ
+## Theme Customization
 
 ```tsx
 <YearlyCalendar
   year={2026}
   events={events}
   theme={{
-    bgSunday: '#ffe4e6',       // 日曜日の背景色
-    bgSaturday: '#e0f2fe',     // 土曜日の背景色
-    buttonPrimary: '#059669',  // ボタン色
-    tooltipBg: '#1f2937',      // ツールチップ背景
+    bgSunday: '#ffe4e6',       // Sunday background color
+    bgSaturday: '#e0f2fe',     // Saturday background color
+    bgHoliday: '#fef2f2',      // Holiday background color
+    buttonPrimary: '#059669',  // Button color
+    tooltipBg: '#1f2937',      // Tooltip background
   }}
 />
 ```
 
 ### ThemeColors
 
-| プロパティ | 説明 | デフォルト |
-|-----------|------|-----------|
-| `bgWhite` | 通常セル背景 | `#ffffff` |
-| `bgGray50` | ホバー時背景 | `#f9fafb` |
-| `bgGray100` | ヘッダー背景 | `#f3f4f6` |
-| `bgSunday` | 日曜日背景 | `#fef2f2` |
-| `bgSaturday` | 土曜日背景 | `#eff6ff` |
-| `bgDropHighlight` | ドロップ先ハイライト | `rgba(191, 219, 254, 0.5)` |
-| `borderDefault` | ボーダー色 | `#d1d5db` |
-| `borderDropHighlight` | ドロップ先ボーダー | `#3b82f6` |
-| `textPrimary` | メインテキスト | `#111827` |
-| `textSecondary` | サブテキスト | `#4b5563` |
-| `textMuted` | 薄いテキスト | `#6b7280` |
-| `tooltipBg` | ツールチップ背景 | `#111827` |
-| `tooltipText` | ツールチップ文字 | `#ffffff` |
-| `buttonPrimary` | ボタン背景 | `#2563eb` |
-| `buttonPrimaryHover` | ボタンホバー | `#1d4ed8` |
-| `floatingDateBg` | ドラッグ中日付表示 | `#2563eb` |
-| `resizeFloatingBg` | リサイズ中日付表示 | `#9333ea` |
-
-## イベント移動の実装例
+| Property | Description | Default |
+|----------|-------------|---------|
+| `bgWhite` | Normal cell background | `#ffffff` |
+| `bgGray50` | Hover background | `#f9fafb` |
+| `bgGray100` | Header background | `#f3f4f6` |
+| `bgSunday` | Sunday background | `#fef2f2` |
+| `bgSaturday` | Saturday background | `#eff6ff` |
+| `bgHoliday` | Holiday background | `#fef2f2` |
+| `bgDropHighlight` | Drop target highlight | `rgba(191, 219, 254, 0.5)` |
+| `borderDefault` | Border color | `#d1d5db` |
+| `borderDropHighlight` | Drop target border | `#3b82f6` |
+| `textPrimary` | Main text color | `#111827` |
+| `textSecondary` | Secondary text color | `#4b5563` |
+| `textMuted` | Muted text color | `#6b7280` |
+| `tooltipBg` | Tooltip background | `#111827` |
+| `tooltipText` | Tooltip text color | `#ffffff` |
+| `buttonPrimary` | Button background | `#2563eb` |
+| `buttonPrimaryHover` | Button hover background | `#1d4ed8` |
+| `floatingDateBg` | Dragging date display background | `#2563eb` |
+| `resizeFloatingBg` | Resizing date display background | `#9333ea` |
+
+## Event Move Implementation Example
 
 ```tsx
 import { useState, useCallback } from 'react';
@@ -133,7 +176,7 @@ import { YearlyCalendar, CalendarEvent } from 'react-yearly-calendar-grid';
 
 function App() {
   const [events, setEvents] = useState<CalendarEvent[]>([
-    { id: '1', date: new Date(2026, 0, 15), title: '予定1' },
+    { id: '1', date: new Date(2026, 0, 15), title: 'Event 1' },
   ]);
 
   const handleEventMove = useCallback(
@@ -159,11 +202,11 @@ function App() {
 }
 ```
 
-## 注意点
+## Notes
 
-- コンテナに高さを指定してください（`height: 100vh` など）
-- カレンダーは親要素いっぱいに広がります
-- 依存ライブラリなし（React/ReactDOM のみ peerDependency）
+- Set a height on the container (e.g., `height: 100vh`)
+- The calendar expands to fill its parent element
+- No external dependencies (only React/ReactDOM as peerDependencies)
 
 ## License
 

package/dist/index.d.mts

@@ -9,12 +9,17 @@ interface CalendarEvent {
     color?: string;
     category?: string;
 }
+interface Holiday {
+    date: Date;
+    name: string;
+}
 interface ThemeColors {
     bgWhite?: string;
     bgGray50?: string;
     bgGray100?: string;
     bgSunday?: string;
     bgSaturday?: string;
+    bgHoliday?: string;
     bgDropHighlight?: string;
     borderDefault?: string;
     borderDropHighlight?: string;
@@ -32,6 +37,7 @@ interface ThemeColors {
 interface YearlyCalendarProps {
     year: number;
     events?: CalendarEvent[];
+    holidays?: Holiday[];
     onDateClick?: (date: Date, events: CalendarEvent[]) => void;
     onDateDoubleClick?: (date: Date, events: CalendarEvent[]) => void;
     onDateRangeSelect?: (startDate: Date, endDate: Date) => void;
@@ -53,7 +59,7 @@ interface DayCellProps {
     onEventClick?: (event: CalendarEvent) => void;
 }
 
-declare function YearlyCalendar({ year, events, onDateClick, onDateDoubleClick, onDateRangeSelect, onEventClick, onEventMove, highlightRange, categoryColors, theme: customTheme, }: YearlyCalendarProps): react_jsx_runtime.JSX.Element;
+declare function YearlyCalendar({ year, events, holidays, onDateClick, onDateDoubleClick, onDateRangeSelect, onEventClick, onEventMove, highlightRange, categoryColors, theme: customTheme, }: YearlyCalendarProps): react_jsx_runtime.JSX.Element;
 
 declare const defaultTheme: Required<ThemeColors>;
 declare function mergeTheme(custom?: ThemeColors): Required<ThemeColors>;
@@ -98,4 +104,4 @@ declare function createStyles(theme: Required<ThemeColors>): {
     truncate: CSSProperties;
 };
 
-export { type CalendarEvent, type DayCellProps, type ThemeColors, YearlyCalendar, type YearlyCalendarProps, createStyles, defaultTheme, mergeTheme };
+export { type CalendarEvent, type DayCellProps, type Holiday, type ThemeColors, YearlyCalendar, type YearlyCalendarProps, createStyles, defaultTheme, mergeTheme };

package/dist/index.d.ts

@@ -9,12 +9,17 @@ interface CalendarEvent {
     color?: string;
     category?: string;
 }
+interface Holiday {
+    date: Date;
+    name: string;
+}
 interface ThemeColors {
     bgWhite?: string;
     bgGray50?: string;
     bgGray100?: string;
     bgSunday?: string;
     bgSaturday?: string;
+    bgHoliday?: string;
     bgDropHighlight?: string;
     borderDefault?: string;
     borderDropHighlight?: string;
@@ -32,6 +37,7 @@ interface ThemeColors {
 interface YearlyCalendarProps {
     year: number;
     events?: CalendarEvent[];
+    holidays?: Holiday[];
     onDateClick?: (date: Date, events: CalendarEvent[]) => void;
     onDateDoubleClick?: (date: Date, events: CalendarEvent[]) => void;
     onDateRangeSelect?: (startDate: Date, endDate: Date) => void;
@@ -53,7 +59,7 @@ interface DayCellProps {
     onEventClick?: (event: CalendarEvent) => void;
 }
 
-declare function YearlyCalendar({ year, events, onDateClick, onDateDoubleClick, onDateRangeSelect, onEventClick, onEventMove, highlightRange, categoryColors, theme: customTheme, }: YearlyCalendarProps): react_jsx_runtime.JSX.Element;
+declare function YearlyCalendar({ year, events, holidays, onDateClick, onDateDoubleClick, onDateRangeSelect, onEventClick, onEventMove, highlightRange, categoryColors, theme: customTheme, }: YearlyCalendarProps): react_jsx_runtime.JSX.Element;
 
 declare const defaultTheme: Required<ThemeColors>;
 declare function mergeTheme(custom?: ThemeColors): Required<ThemeColors>;
@@ -98,4 +104,4 @@ declare function createStyles(theme: Required<ThemeColors>): {
     truncate: CSSProperties;
 };
 
-export { type CalendarEvent, type DayCellProps, type ThemeColors, YearlyCalendar, type YearlyCalendarProps, createStyles, defaultTheme, mergeTheme };
+export { type CalendarEvent, type DayCellProps, type Holiday, type ThemeColors, YearlyCalendar, type YearlyCalendarProps, createStyles, defaultTheme, mergeTheme };

package/dist/index.js

@@ -32,6 +32,7 @@ var defaultTheme = {
   bgGray100: "#f3f4f6",
   bgSunday: "#fef2f2",
   bgSaturday: "#eff6ff",
+  bgHoliday: "#fef2f2",
   bgDropHighlight: "rgba(191, 219, 254, 0.5)",
   // ボーダー
   borderDefault: "#d1d5db",
@@ -337,9 +338,10 @@ function createStyles(theme) {
     }
   };
 }
-function getCellBackgroundColor(theme, isValidDay, isSunday2, isSaturday2, isHovered) {
+function getCellBackgroundColor(theme, isValidDay, isSunday2, isSaturday2, isHovered, isHoliday = false) {
   if (!isValidDay) return theme.bgGray100;
   if (isHovered) return theme.bgGray50;
+  if (isHoliday) return theme.bgHoliday;
   if (isSunday2) return theme.bgSunday;
   if (isSaturday2) return theme.bgSaturday;
   return theme.bgWhite;
@@ -412,6 +414,7 @@ function calculateLanes(spans) {
 function YearlyCalendar({
   year,
   events = [],
+  holidays = [],
   onDateClick,
   onDateDoubleClick,
   onDateRangeSelect,
@@ -458,6 +461,18 @@ function YearlyCalendar({
   const [rangeSelectionStart, setRangeSelectionStart] = react.useState(null);
   const [rangeSelectionEnd, setRangeSelectionEnd] = react.useState(null);
   const isRangeSelecting = rangeSelectionStart !== null;
+  const holidayMap = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    holidays.forEach((holiday) => {
+      const dateKey = `${holiday.date.getFullYear()}-${holiday.date.getMonth()}-${holiday.date.getDate()}`;
+      map.set(dateKey, holiday);
+    });
+    return map;
+  }, [holidays]);
+  const isHoliday = (month, day) => {
+    const dateKey = `${year}-${month}-${day}`;
+    return holidayMap.has(dateKey);
+  };
   const monthSpans = react.useMemo(() => {
     const result = [];
     for (let month = 0; month < 12; month++) {
@@ -830,6 +845,7 @@ function YearlyCalendar({
             const isValidDay = day <= daysInMonth;
             const sunday = isValidDay && isSunday(year, monthIndex, day);
             const saturday = isValidDay && isSaturday(year, monthIndex, day);
+            const holiday = isValidDay && isHoliday(monthIndex, day);
             const isHovered = (hoveredCell == null ? void 0 : hoveredCell.month) === monthIndex && (hoveredCell == null ? void 0 : hoveredCell.day) === day;
             const isInRange = isValidDay && isInSelectionRange(monthIndex, day);
             const isHighlighted = isValidDay && isInHighlightRange(monthIndex, day);
@@ -843,7 +859,8 @@ function YearlyCalendar({
                     isValidDay,
                     sunday,
                     saturday,
-                    isHovered && isValidDay && !isRangeSelecting
+                    isHovered && isValidDay && !isRangeSelecting,
+                    holiday
                   ),
                   cursor: isValidDay ? "pointer" : "default",
                   userSelect: "none"