0
# Styling System
1

2
React Day Picker provides a comprehensive styling system supporting CSS classes, inline styles, CSS modules, and modifier-based styling with complete customization control.
3

4
## Capabilities
5

6
### CSS Classes System
7

8
Control the appearance of all UI elements through CSS class names.
9

10
```typescript { .api }
11
/**
12
 * CSS class names for all UI elements
13
 */
14
interface ClassNames {
15
  [UI.Root]: string;
16
  [UI.Months]: string;
17
  [UI.Month]: string;
18
  [UI.MonthCaption]: string;
19
  [UI.CaptionLabel]: string;
20
  [UI.MonthGrid]: string;
21
  [UI.Weekdays]: string;
22
  [UI.Weekday]: string;
23
  [UI.WeekNumberHeader]: string;
24
  [UI.Weeks]: string;
25
  [UI.Week]: string;
26
  [UI.WeekNumber]: string;
27
  [UI.Day]: string;
28
  [UI.DayButton]: string;
29
  [UI.Nav]: string;
30
  [UI.PreviousMonthButton]: string;
31
  [UI.NextMonthButton]: string;
32
  [UI.Chevron]: string;
33
  [UI.Footer]: string;
34
  [UI.Dropdown]: string;
35
  [UI.Dropdowns]: string;
36
  [UI.MonthsDropdown]: string;
37
  [UI.YearsDropdown]: string;
38
  [UI.DropdownNav]: string;
39
  // ... additional UI elements
40
}
41

42
/**
43
 * UI element enumeration for styling
44
 */
45
enum UI {
46
  Root = "rdp-root",
47
  Months = "rdp-months", 
48
  Month = "rdp-month",
49
  MonthCaption = "rdp-month_caption",
50
  CaptionLabel = "rdp-caption_label",
51
  MonthGrid = "rdp-month_grid",
52
  Weekdays = "rdp-weekdays",
53
  Weekday = "rdp-weekday",
54
  WeekNumberHeader = "rdp-weeknumber_header",
55
  Weeks = "rdp-weeks",
56
  Week = "rdp-week",
57
  WeekNumber = "rdp-weeknumber",
58
  Day = "rdp-day",
59
  DayButton = "rdp-day_button",
60
  Nav = "rdp-nav",
61
  PreviousMonthButton = "rdp-previous_month_button",
62
  NextMonthButton = "rdp-next_month_button",
63
  Chevron = "rdp-chevron",
64
  Footer = "rdp-footer",
65
  Dropdown = "rdp-dropdown",
66
  Dropdowns = "rdp-dropdowns",
67
  MonthsDropdown = "rdp-months_dropdown",
68
  YearsDropdown = "rdp-years_dropdown",
69
  DropdownNav = "rdp-dropdown_nav"
70
}
71
```
72

73
**Usage Examples:**
74

75
```typescript
76
import { DayPicker } from "react-day-picker";
77
import "react-day-picker/style.css"; // Import base styles
78
import "./custom-calendar.css"; // Import custom styles
79

80
// Basic class name customization
81
<DayPicker
82
  classNames={{
83
    day: "my-day-class",
84
    selected: "my-selected-class",
85
    today: "my-today-class"
86
  }}
87
/>
88

89
// CSS Modules support
90
import styles from "./calendar.module.css";
91

92
<DayPicker
93
  classNames={{
94
    root: styles.calendar,
95
    month: styles.month,
96
    day: styles.day,
97
    selected: styles.selected
98
  }}
99
/>
100

101
// Tailwind CSS classes
102
<DayPicker
103
  classNames={{
104
    root: "bg-white rounded-lg shadow-lg p-4",
105
    month: "text-gray-900",
106
    day: "hover:bg-blue-100 rounded",
107
    selected: "bg-blue-500 text-white",
108
    today: "bg-yellow-100 font-bold"
109
  }}
110
/>
111
```
112

113
### Inline Styles System
114

115
Apply CSS styles directly to UI elements for dynamic styling.
116

117
```typescript { .api }
118
/**
119
 * CSS styles for all UI elements
120
 */
121
interface Styles {
122
  [UI.Root]?: React.CSSProperties;
123
  [UI.Months]?: React.CSSProperties;
124
  [UI.Month]?: React.CSSProperties;
125
  [UI.MonthCaption]?: React.CSSProperties;
126
  [UI.CaptionLabel]?: React.CSSProperties;
127
  [UI.MonthGrid]?: React.CSSProperties;
128
  [UI.Weekdays]?: React.CSSProperties;
129
  [UI.Weekday]?: React.CSSProperties;
130
  [UI.WeekNumberHeader]?: React.CSSProperties;
131
  [UI.Weeks]?: React.CSSProperties;
132
  [UI.Week]?: React.CSSProperties;
133
  [UI.WeekNumber]?: React.CSSProperties;
134
  [UI.Day]?: React.CSSProperties;
135
  [UI.DayButton]?: React.CSSProperties;
136
  [UI.Nav]?: React.CSSProperties;
137
  [UI.PreviousMonthButton]?: React.CSSProperties;
138
  [UI.NextMonthButton]?: React.CSSProperties;
139
  [UI.Chevron]?: React.CSSProperties;
140
  [UI.Footer]?: React.CSSProperties;
141
  [UI.Dropdown]?: React.CSSProperties;
142
  [UI.Dropdowns]?: React.CSSProperties;
143
  [UI.MonthsDropdown]?: React.CSSProperties;
144
  [UI.YearsDropdown]?: React.CSSProperties;
145
  [UI.DropdownNav]?: React.CSSProperties;
146
  // ... additional UI elements
147
}
148
```
149

150
**Usage Examples:**
151

152
```typescript
153
// Dynamic theme-based styling
154
function ThemedCalendar({ isDarkMode }: { isDarkMode: boolean }) {
155
  const styles: Partial<Styles> = {
156
    root: {
157
      backgroundColor: isDarkMode ? "#1a1a1a" : "#ffffff",
158
      color: isDarkMode ? "#ffffff" : "#000000",
159
      border: `1px solid ${isDarkMode ? "#333" : "#ccc"}`,
160
      borderRadius: "8px",
161
      padding: "16px"
162
    },
163
    month: {
164
      fontSize: "16px"
165
    },
166
    day: {
167
      borderRadius: "4px",
168
      transition: "all 0.2s ease"
169
    },
170
    nav: {
171
      marginBottom: "16px"
172
    }
173
  };
174
  
175
  return <DayPicker styles={styles} />;
176
}
177

178
// Responsive styling
179
function ResponsiveCalendar() {
180
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
181
  
182
  const styles: Partial<Styles> = {
183
    root: {
184
      fontSize: windowWidth < 768 ? "14px" : "16px",
185
      padding: windowWidth < 768 ? "8px" : "16px"
186
    },
187
    month: {
188
      minWidth: windowWidth < 768 ? "280px" : "320px"
189
    }
190
  };
191
  
192
  return <DayPicker numberOfMonths={windowWidth < 768 ? 1 : 2} styles={styles} />;
193
}
194
```
195

196
### Modifier-Based Styling
197

198
Apply styles to days based on their state or custom modifiers.
199

200
```typescript { .api }
201
/**
202
 * CSS class names for day modifiers
203
 */
204
interface ModifiersClassNames {
205
  [modifier: string]: string;
206
}
207

208
/**
209
 * CSS styles for day modifiers  
210
 */
211
interface ModifiersStyles {
212
  [modifier: string]: React.CSSProperties;
213
}
214

215
/**
216
 * Built-in day modifiers
217
 */
218
enum DayFlag {
219
  disabled = "disabled",
220
  hidden = "hidden", 
221
  outside = "outside",
222
  focused = "focused",
223
  today = "today"
224
}
225

226
enum SelectionState {
227
  selected = "selected",
228
  range_start = "range_start",
229
  range_middle = "range_middle", 
230
  range_end = "range_end"
231
}
232
```
233

234
**Usage Examples:**
235

236
```typescript
237
// Custom modifier styling with classes
238
function CustomModifierCalendar() {
239
  const holidays = [
240
    new Date(2024, 6, 4),   // July 4th
241
    new Date(2024, 11, 25)  // Christmas
242
  ];
243
  
244
  return (
245
    <DayPicker
246
      modifiers={{
247
        holiday: holidays,
248
        weekend: { dayOfWeek: [0, 6] },
249
        available: (date: Date) => date.getDate() % 2 === 0,
250
        booked: [
251
          new Date(2024, 6, 10),
252
          new Date(2024, 6, 15)
253
        ]
254
      }}
255
      modifiersClassNames={{
256
        holiday: "holiday-day",
257
        weekend: "weekend-day", 
258
        available: "available-day",
259
        booked: "booked-day"
260
      }}
261
    />
262
  );
263
}
264

265
// Custom modifier styling with inline styles
266
function InlineModifierCalendar() {
267
  return (
268
    <DayPicker
269
      modifiers={{
270
        expensive: (date: Date) => [15, 16, 17].includes(date.getDate()),
271
        cheap: (date: Date) => [1, 2, 3].includes(date.getDate()),
272
        weekend: { dayOfWeek: [0, 6] }
273
      }}
274
      modifiersStyles={{
275
        expensive: {
276
          backgroundColor: "#ff4444",
277
          color: "white",
278
          fontWeight: "bold"
279
        },
280
        cheap: {
281
          backgroundColor: "#44ff44", 
282
          color: "black",
283
          border: "2px solid #22cc22"
284
        },
285
        weekend: {
286
          backgroundColor: "#f0f0f0",
287
          fontStyle: "italic"
288
        }
289
      }}
290
    />
291
  );
292
}
293

294
// Conditional styling based on selection state
295
function ConditionalStyleCalendar() {
296
  const [selected, setSelected] = useState<DateRange | undefined>();
297
  
298
  return (
299
    <DayPicker
300
      mode="range"
301
      selected={selected}
302
      onSelect={setSelected}
303
      modifiersStyles={{
304
        selected: {
305
          backgroundColor: "#007bff",
306
          color: "white"
307
        },
308
        range_start: {
309
          backgroundColor: "#007bff",
310
          color: "white", 
311
          borderRadius: "50% 0 0 50%"
312
        },
313
        range_end: {
314
          backgroundColor: "#007bff",
315
          color: "white",
316
          borderRadius: "0 50% 50% 0"
317
        },
318
        range_middle: {
319
          backgroundColor: "#e3f2fd",
320
          color: "#007bff"
321
        }
322
      }}
323
    />
324
  );
325
}
326
```
327

328
### Animation Styling
329

330
Built-in animation classes for month transitions.
331

332
```typescript { .api }
333
/**
334
 * Animation state enumeration
335
 */
336
enum Animation {
337
  weeks_before_enter = "rdp-weeks_before_enter",
338
  weeks_after_exit = "rdp-weeks_after_exit", 
339
  caption_before_enter = "rdp-caption_before_enter",
340
  caption_after_exit = "rdp-caption_after_exit"
341
}
342

343
/**
344
 * Props for animation control
345
 */
346
interface PropsBase {
347
  /** Enable month change animation */
348
  animate?: boolean;
349
}
350
```
351

352
**Usage Examples:**
353

354
```typescript
355
// Enable animations with custom CSS
356
<DayPicker
357
  animate={true}
358
  classNames={{
359
    [Animation.weeks_before_enter]: "slide-in-left",
360
    [Animation.weeks_after_exit]: "slide-out-right",
361
    [Animation.caption_before_enter]: "fade-in",
362
    [Animation.caption_after_exit]: "fade-out"
363
  }}
364
/>
365

366
// Custom animation styles
367
const animationStyles = {
368
  [Animation.weeks_before_enter]: {
369
    transform: "translateX(-100%)",
370
    opacity: 0,
371
    transition: "all 0.3s ease-in-out"
372
  },
373
  [Animation.weeks_after_exit]: {
374
    transform: "translateX(100%)",
375
    opacity: 0,
376
    transition: "all 0.3s ease-in-out"
377
  }
378
};
379

380
<DayPicker animate={true} styles={animationStyles} />
381
```
382

383
### CSS Custom Properties
384

385
Support for CSS custom properties (CSS variables) for theming.
386

387
```typescript { .api }
388
/**
389
 * CSS custom properties for theming
390
 */
391
interface CSSCustomProperties {
392
  "--rdp-color-primary"?: string;
393
  "--rdp-color-secondary"?: string;
394
  "--rdp-background-color"?: string;
395
  "--rdp-border-color"?: string;
396
  "--rdp-border-radius"?: string;
397
  "--rdp-font-size"?: string;
398
  "--rdp-font-family"?: string;
399
  // ... additional custom properties
400
}
401
```
402

403
**Usage Examples:**
404

405
```typescript
406
// CSS custom properties theming
407
function CustomPropertiesCalendar() {
408
  const cssVars = {
409
    "--rdp-color-primary": "#ff6b6b",
410
    "--rdp-color-secondary": "#4ecdc4", 
411
    "--rdp-background-color": "#f8f9fa",
412
    "--rdp-border-color": "#dee2e6",
413
    "--rdp-border-radius": "12px",
414
    "--rdp-font-size": "14px"
415
  } as React.CSSProperties;
416
  
417
  return (
418
    <div style={cssVars}>
419
      <DayPicker />
420
    </div>
421
  );
422
}
423

424
// Theme switching
425
function ThemeSwitch() {
426
  const [theme, setTheme] = useState<"light" | "dark">("light");
427
  
428
  const themes = {
429
    light: {
430
      "--rdp-color-primary": "#007bff",
431
      "--rdp-background-color": "#ffffff",
432
      "--rdp-border-color": "#e0e0e0"
433
    },
434
    dark: {
435
      "--rdp-color-primary": "#64b5f6", 
436
      "--rdp-background-color": "#121212",
437
      "--rdp-border-color": "#424242"
438
    }
439
  } as const;
440
  
441
  return (
442
    <div>
443
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
444
        Switch to {theme === "light" ? "dark" : "light"} theme
445
      </button>
446
      <div style={themes[theme] as React.CSSProperties}>
447
        <DayPicker />
448
      </div>
449
    </div>
450
  );
451
}
452
```
453

454
### Utility Functions
455

456
Helper functions for working with styles and class names.
457

458
```typescript { .api }
459
/**
460
 * Get CSS class names for day modifiers
461
 * @param modifiers - Day modifier flags
462
 * @param classNames - Class names mapping
463
 * @param modifiersClassNames - Modifier-specific class names
464
 * @returns Array of CSS class names
465
 */
466
function getClassNamesForModifiers(
467
  modifiers: Modifiers,
468
  classNames: ClassNames,
469
  modifiersClassNames?: ModifiersClassNames
470
): string[];
471

472
/**
473
 * Get inline styles for day modifiers
474
 * @param modifiers - Day modifier flags
475
 * @param styles - Styles mapping
476
 * @param modifiersStyles - Modifier-specific styles
477
 * @returns Combined CSS properties object
478
 */
479
function getStyleForModifiers(
480
  modifiers: Modifiers,
481
  styles?: Partial<Styles>,
482
  modifiersStyles?: ModifiersStyles
483
): React.CSSProperties;
484
```
485

486
**Usage Examples:**
487

488
```typescript
489
import { 
490
  getClassNamesForModifiers, 
491
  getStyleForModifiers 
492
} from "react-day-picker";
493

494
// Custom day component with modifier styling
495
function StyledDay({ day, modifiers, classNames, styles }: DayProps) {
496
  const dayClassNames = getClassNamesForModifiers(
497
    modifiers,
498
    classNames,
499
    {
500
      weekend: "weekend-style",
501
      holiday: "holiday-style"
502
    }
503
  );
504
  
505
  const dayStyles = getStyleForModifiers(
506
    modifiers,
507
    styles,
508
    {
509
      weekend: { backgroundColor: "#f0f0f0" },
510
      holiday: { backgroundColor: "#ff6b6b", color: "white" }
511
    }
512
  );
513
  
514
  return (
515
    <div 
516
      className={dayClassNames.join(" ")}
517
      style={dayStyles}
518
    >
519
      {day.date.getDate()}
520
    </div>
521
  );
522
}
523
```