tessl/npm-react-day-picker

Customizable Date Picker for React with extensive internationalization and accessibility support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Styling System

Name: tessl/npm-react-day-picker
Author: tessl

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

Capabilities

CSS Classes System

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

/**
 * CSS class names for all UI elements
 */
interface ClassNames {
  [UI.Root]: string;
  [UI.Months]: string;
  [UI.Month]: string;
  [UI.MonthCaption]: string;
  [UI.CaptionLabel]: string;
  [UI.MonthGrid]: string;
  [UI.Weekdays]: string;
  [UI.Weekday]: string;
  [UI.WeekNumberHeader]: string;
  [UI.Weeks]: string;
  [UI.Week]: string;
  [UI.WeekNumber]: string;
  [UI.Day]: string;
  [UI.DayButton]: string;
  [UI.Nav]: string;
  [UI.PreviousMonthButton]: string;
  [UI.NextMonthButton]: string;
  [UI.Chevron]: string;
  [UI.Footer]: string;
  [UI.Dropdown]: string;
  [UI.Dropdowns]: string;
  [UI.MonthsDropdown]: string;
  [UI.YearsDropdown]: string;
  [UI.DropdownNav]: string;
  // ... additional UI elements
}

/**
 * UI element enumeration for styling
 */
enum UI {
  Root = "rdp-root",
  Months = "rdp-months", 
  Month = "rdp-month",
  MonthCaption = "rdp-month_caption",
  CaptionLabel = "rdp-caption_label",
  MonthGrid = "rdp-month_grid",
  Weekdays = "rdp-weekdays",
  Weekday = "rdp-weekday",
  WeekNumberHeader = "rdp-weeknumber_header",
  Weeks = "rdp-weeks",
  Week = "rdp-week",
  WeekNumber = "rdp-weeknumber",
  Day = "rdp-day",
  DayButton = "rdp-day_button",
  Nav = "rdp-nav",
  PreviousMonthButton = "rdp-previous_month_button",
  NextMonthButton = "rdp-next_month_button",
  Chevron = "rdp-chevron",
  Footer = "rdp-footer",
  Dropdown = "rdp-dropdown",
  Dropdowns = "rdp-dropdowns",
  MonthsDropdown = "rdp-months_dropdown",
  YearsDropdown = "rdp-years_dropdown",
  DropdownNav = "rdp-dropdown_nav"
}

Usage Examples:

import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css"; // Import base styles
import "./custom-calendar.css"; // Import custom styles

// Basic class name customization
<DayPicker
  classNames={{
    day: "my-day-class",
    selected: "my-selected-class",
    today: "my-today-class"
  }}
/>

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

<DayPicker
  classNames={{
    root: styles.calendar,
    month: styles.month,
    day: styles.day,
    selected: styles.selected
  }}
/>

// Tailwind CSS classes
<DayPicker
  classNames={{
    root: "bg-white rounded-lg shadow-lg p-4",
    month: "text-gray-900",
    day: "hover:bg-blue-100 rounded",
    selected: "bg-blue-500 text-white",
    today: "bg-yellow-100 font-bold"
  }}
/>

Inline Styles System

Apply CSS styles directly to UI elements for dynamic styling.

/**
 * CSS styles for all UI elements
 */
interface Styles {
  [UI.Root]?: React.CSSProperties;
  [UI.Months]?: React.CSSProperties;
  [UI.Month]?: React.CSSProperties;
  [UI.MonthCaption]?: React.CSSProperties;
  [UI.CaptionLabel]?: React.CSSProperties;
  [UI.MonthGrid]?: React.CSSProperties;
  [UI.Weekdays]?: React.CSSProperties;
  [UI.Weekday]?: React.CSSProperties;
  [UI.WeekNumberHeader]?: React.CSSProperties;
  [UI.Weeks]?: React.CSSProperties;
  [UI.Week]?: React.CSSProperties;
  [UI.WeekNumber]?: React.CSSProperties;
  [UI.Day]?: React.CSSProperties;
  [UI.DayButton]?: React.CSSProperties;
  [UI.Nav]?: React.CSSProperties;
  [UI.PreviousMonthButton]?: React.CSSProperties;
  [UI.NextMonthButton]?: React.CSSProperties;
  [UI.Chevron]?: React.CSSProperties;
  [UI.Footer]?: React.CSSProperties;
  [UI.Dropdown]?: React.CSSProperties;
  [UI.Dropdowns]?: React.CSSProperties;
  [UI.MonthsDropdown]?: React.CSSProperties;
  [UI.YearsDropdown]?: React.CSSProperties;
  [UI.DropdownNav]?: React.CSSProperties;
  // ... additional UI elements
}

Usage Examples:

// Dynamic theme-based styling
function ThemedCalendar({ isDarkMode }: { isDarkMode: boolean }) {
  const styles: Partial<Styles> = {
    root: {
      backgroundColor: isDarkMode ? "#1a1a1a" : "#ffffff",
      color: isDarkMode ? "#ffffff" : "#000000",
      border: `1px solid ${isDarkMode ? "#333" : "#ccc"}`,
      borderRadius: "8px",
      padding: "16px"
    },
    month: {
      fontSize: "16px"
    },
    day: {
      borderRadius: "4px",
      transition: "all 0.2s ease"
    },
    nav: {
      marginBottom: "16px"
    }
  };
  
  return <DayPicker styles={styles} />;
}

// Responsive styling
function ResponsiveCalendar() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  
  const styles: Partial<Styles> = {
    root: {
      fontSize: windowWidth < 768 ? "14px" : "16px",
      padding: windowWidth < 768 ? "8px" : "16px"
    },
    month: {
      minWidth: windowWidth < 768 ? "280px" : "320px"
    }
  };
  
  return <DayPicker numberOfMonths={windowWidth < 768 ? 1 : 2} styles={styles} />;
}

Modifier-Based Styling

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

/**
 * CSS class names for day modifiers
 */
interface ModifiersClassNames {
  [modifier: string]: string;
}

/**
 * CSS styles for day modifiers  
 */
interface ModifiersStyles {
  [modifier: string]: React.CSSProperties;
}

/**
 * Built-in day modifiers
 */
enum DayFlag {
  disabled = "disabled",
  hidden = "hidden", 
  outside = "outside",
  focused = "focused",
  today = "today"
}

enum SelectionState {
  selected = "selected",
  range_start = "range_start",
  range_middle = "range_middle", 
  range_end = "range_end"
}

Usage Examples:

// Custom modifier styling with classes
function CustomModifierCalendar() {
  const holidays = [
    new Date(2024, 6, 4),   // July 4th
    new Date(2024, 11, 25)  // Christmas
  ];
  
  return (
    <DayPicker
      modifiers={{
        holiday: holidays,
        weekend: { dayOfWeek: [0, 6] },
        available: (date: Date) => date.getDate() % 2 === 0,
        booked: [
          new Date(2024, 6, 10),
          new Date(2024, 6, 15)
        ]
      }}
      modifiersClassNames={{
        holiday: "holiday-day",
        weekend: "weekend-day", 
        available: "available-day",
        booked: "booked-day"
      }}
    />
  );
}

// Custom modifier styling with inline styles
function InlineModifierCalendar() {
  return (
    <DayPicker
      modifiers={{
        expensive: (date: Date) => [15, 16, 17].includes(date.getDate()),
        cheap: (date: Date) => [1, 2, 3].includes(date.getDate()),
        weekend: { dayOfWeek: [0, 6] }
      }}
      modifiersStyles={{
        expensive: {
          backgroundColor: "#ff4444",
          color: "white",
          fontWeight: "bold"
        },
        cheap: {
          backgroundColor: "#44ff44", 
          color: "black",
          border: "2px solid #22cc22"
        },
        weekend: {
          backgroundColor: "#f0f0f0",
          fontStyle: "italic"
        }
      }}
    />
  );
}

// Conditional styling based on selection state
function ConditionalStyleCalendar() {
  const [selected, setSelected] = useState<DateRange | undefined>();
  
  return (
    <DayPicker
      mode="range"
      selected={selected}
      onSelect={setSelected}
      modifiersStyles={{
        selected: {
          backgroundColor: "#007bff",
          color: "white"
        },
        range_start: {
          backgroundColor: "#007bff",
          color: "white", 
          borderRadius: "50% 0 0 50%"
        },
        range_end: {
          backgroundColor: "#007bff",
          color: "white",
          borderRadius: "0 50% 50% 0"
        },
        range_middle: {
          backgroundColor: "#e3f2fd",
          color: "#007bff"
        }
      }}
    />
  );
}

Animation Styling

Built-in animation classes for month transitions.

/**
 * Animation state enumeration
 */
enum Animation {
  weeks_before_enter = "rdp-weeks_before_enter",
  weeks_after_exit = "rdp-weeks_after_exit", 
  caption_before_enter = "rdp-caption_before_enter",
  caption_after_exit = "rdp-caption_after_exit"
}

/**
 * Props for animation control
 */
interface PropsBase {
  /** Enable month change animation */
  animate?: boolean;
}

Usage Examples:

// Enable animations with custom CSS
<DayPicker
  animate={true}
  classNames={{
    [Animation.weeks_before_enter]: "slide-in-left",
    [Animation.weeks_after_exit]: "slide-out-right",
    [Animation.caption_before_enter]: "fade-in",
    [Animation.caption_after_exit]: "fade-out"
  }}
/>

// Custom animation styles
const animationStyles = {
  [Animation.weeks_before_enter]: {
    transform: "translateX(-100%)",
    opacity: 0,
    transition: "all 0.3s ease-in-out"
  },
  [Animation.weeks_after_exit]: {
    transform: "translateX(100%)",
    opacity: 0,
    transition: "all 0.3s ease-in-out"
  }
};

<DayPicker animate={true} styles={animationStyles} />

CSS Custom Properties

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

/**
 * CSS custom properties for theming
 */
interface CSSCustomProperties {
  "--rdp-color-primary"?: string;
  "--rdp-color-secondary"?: string;
  "--rdp-background-color"?: string;
  "--rdp-border-color"?: string;
  "--rdp-border-radius"?: string;
  "--rdp-font-size"?: string;
  "--rdp-font-family"?: string;
  // ... additional custom properties
}

Usage Examples:

// CSS custom properties theming
function CustomPropertiesCalendar() {
  const cssVars = {
    "--rdp-color-primary": "#ff6b6b",
    "--rdp-color-secondary": "#4ecdc4", 
    "--rdp-background-color": "#f8f9fa",
    "--rdp-border-color": "#dee2e6",
    "--rdp-border-radius": "12px",
    "--rdp-font-size": "14px"
  } as React.CSSProperties;
  
  return (
    <div style={cssVars}>
      <DayPicker />
    </div>
  );
}

// Theme switching
function ThemeSwitch() {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  
  const themes = {
    light: {
      "--rdp-color-primary": "#007bff",
      "--rdp-background-color": "#ffffff",
      "--rdp-border-color": "#e0e0e0"
    },
    dark: {
      "--rdp-color-primary": "#64b5f6", 
      "--rdp-background-color": "#121212",
      "--rdp-border-color": "#424242"
    }
  } as const;
  
  return (
    <div>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Switch to {theme === "light" ? "dark" : "light"} theme
      </button>
      <div style={themes[theme] as React.CSSProperties}>
        <DayPicker />
      </div>
    </div>
  );
}

Utility Functions

Helper functions for working with styles and class names.

/**
 * Get CSS class names for day modifiers
 * @param modifiers - Day modifier flags
 * @param classNames - Class names mapping
 * @param modifiersClassNames - Modifier-specific class names
 * @returns Array of CSS class names
 */
function getClassNamesForModifiers(
  modifiers: Modifiers,
  classNames: ClassNames,
  modifiersClassNames?: ModifiersClassNames
): string[];

/**
 * Get inline styles for day modifiers
 * @param modifiers - Day modifier flags
 * @param styles - Styles mapping
 * @param modifiersStyles - Modifier-specific styles
 * @returns Combined CSS properties object
 */
function getStyleForModifiers(
  modifiers: Modifiers,
  styles?: Partial<Styles>,
  modifiersStyles?: ModifiersStyles
): React.CSSProperties;

Usage Examples:

import { 
  getClassNamesForModifiers, 
  getStyleForModifiers 
} from "react-day-picker";

// Custom day component with modifier styling
function StyledDay({ day, modifiers, classNames, styles }: DayProps) {
  const dayClassNames = getClassNamesForModifiers(
    modifiers,
    classNames,
    {
      weekend: "weekend-style",
      holiday: "holiday-style"
    }
  );
  
  const dayStyles = getStyleForModifiers(
    modifiers,
    styles,
    {
      weekend: { backgroundColor: "#f0f0f0" },
      holiday: { backgroundColor: "#ff6b6b", color: "white" }
    }
  );
  
  return (
    <div 
      className={dayClassNames.join(" ")}
      style={dayStyles}
    >
      {day.date.getDate()}
    </div>
  );
}

Install with Tessl CLI