From 26dee00753bbc2496cc57fda1660d8c0a9d9b92a Mon Sep 17 00:00:00 2001
From: Alexey Immoreev <lexx92@mail.ru>
Date: Sun, 3 Mar 2024 02:07:19 +0300
Subject: [PATCH] Add classNames

---
 packages/react-calendar/src/Calendar.tsx      |  61 ++++++++--
 .../src/Calendar/Navigation.tsx               |  72 +++++++++--
 .../react-calendar/src/CenturyView.spec.tsx   |   2 +-
 packages/react-calendar/src/CenturyView.tsx   |  25 +++-
 .../src/CenturyView/Decade.spec.tsx           |  10 +-
 .../react-calendar/src/CenturyView/Decade.tsx |  34 +++---
 .../src/CenturyView/Decades.tsx               |  51 ++++++--
 .../react-calendar/src/DecadeView.spec.tsx    |   2 +-
 packages/react-calendar/src/DecadeView.tsx    |  23 +++-
 .../src/DecadeView/Year.spec.tsx              |  10 +-
 .../react-calendar/src/DecadeView/Year.tsx    |  32 +++--
 .../react-calendar/src/DecadeView/Years.tsx   |  51 ++++++--
 packages/react-calendar/src/Flex.tsx          |   9 +-
 .../react-calendar/src/MonthView.spec.tsx     |   2 +-
 packages/react-calendar/src/MonthView.tsx     |  57 +++++++--
 .../react-calendar/src/MonthView/Day.spec.tsx |   8 +-
 packages/react-calendar/src/MonthView/Day.tsx |  40 +++---
 .../react-calendar/src/MonthView/Days.tsx     |  44 +++++--
 .../src/MonthView/WeekNumber.tsx              |  14 ++-
 .../src/MonthView/WeekNumbers.tsx             |   9 +-
 .../react-calendar/src/MonthView/Weekdays.tsx |  30 ++++-
 packages/react-calendar/src/Tile.spec.tsx     |   9 +-
 packages/react-calendar/src/Tile.tsx          |   6 +-
 packages/react-calendar/src/TileGroup.tsx     |  21 ++--
 packages/react-calendar/src/YearView.spec.tsx |   2 +-
 packages/react-calendar/src/YearView.tsx      |  23 +++-
 .../src/YearView/Month.spec.tsx               |  10 +-
 .../react-calendar/src/YearView/Month.tsx     |  12 +-
 .../react-calendar/src/YearView/Months.tsx    |  44 +++++--
 .../react-calendar/src/shared/propTypes.ts    |  15 ++-
 packages/react-calendar/src/shared/types.ts   |   2 +-
 .../react-calendar/src/shared/utils.spec.ts   |  30 ++---
 packages/react-calendar/src/shared/utils.ts   | 115 ++++++++++++++----
 33 files changed, 646 insertions(+), 229 deletions(-)

diff --git a/packages/react-calendar/src/Calendar.tsx b/packages/react-calendar/src/Calendar.tsx
index eec48ddf..971936dd 100644
--- a/packages/react-calendar/src/Calendar.tsx
+++ b/packages/react-calendar/src/Calendar.tsx
@@ -20,7 +20,7 @@ import {
   isView,
   rangeOf,
 } from './shared/propTypes.js';
-import { between } from './shared/utils.js';
+import { between, mergeTileClassNames, type TileClassNames } from './shared/utils.js';
 
 import type {
   Action,
@@ -60,6 +60,15 @@ defaultMinDate.setFullYear(1, 0, 1);
 defaultMinDate.setHours(0, 0, 0, 0);
 const defaultMaxDate = new Date(8.64e15);
 
+type CenturyClassNames = React.ComponentProps<typeof CenturyView>['classNames'];
+type DecadeClassNames = React.ComponentProps<typeof DecadeView>['classNames'];
+type MonthClassNames = React.ComponentProps<typeof MonthView>['classNames'];
+type YearClassNames = React.ComponentProps<typeof YearView>['classNames'];
+type NavigationClassNames = React.ComponentProps<typeof Navigation>['classNames'];
+
+const localSlotNames = ['base', 'selectRange', 'doubleView', 'viewContainer'] as const;
+type LocalSlotName = (typeof localSlotNames)[number];
+
 export type CalendarProps = {
   /**
    * The beginning of a period that shall be displayed. If you wish to use react-calendar in an uncontrolled way, use `defaultActiveStartDate` instead.
@@ -87,6 +96,22 @@ export type CalendarProps = {
    * @example ['class1', 'class2 class3']
    */
   className?: ClassName;
+  /**
+   * Class names that will be added to appropriate slots.
+   *
+   * @example {}
+   */
+  classNames?: Partial<
+    Record<LocalSlotName, ClassName> & {
+      decade: DecadeClassNames;
+      century: CenturyClassNames;
+      month: MonthClassNames;
+      year: YearClassNames;
+      navigation: NavigationClassNames;
+      tileGroup: ClassName;
+      tile: TileClassNames;
+    }
+  >;
   /**
    * The beginning of a period that shall be displayed by default. If you wish to use react-calendar in a controlled way, use `activeStartDate` instead.
    *
@@ -614,6 +639,7 @@ const Calendar = forwardRef(function Calendar(props: CalendarProps, ref) {
     allowPartialRange,
     calendarType,
     className,
+    classNames = {},
     defaultActiveStartDate,
     defaultValue,
     defaultView,
@@ -1042,6 +1068,10 @@ const Calendar = forwardRef(function Calendar(props: CalendarProps, ref) {
           <CenturyView
             formatYear={formatYear}
             showNeighboringCentury={showNeighboringCentury}
+            classNames={{
+              ...classNames.century,
+              tile: mergeTileClassNames(classNames.tile, classNames.century?.tile),
+            }}
             {...commonProps}
           />
         );
@@ -1051,13 +1081,25 @@ const Calendar = forwardRef(function Calendar(props: CalendarProps, ref) {
           <DecadeView
             formatYear={formatYear}
             showNeighboringDecade={showNeighboringDecade}
+            classNames={{
+              ...classNames.decade,
+              tile: mergeTileClassNames(classNames.tile, classNames.decade?.tile),
+            }}
             {...commonProps}
           />
         );
       }
       case 'year': {
         return (
-          <YearView formatMonth={formatMonth} formatMonthYear={formatMonthYear} {...commonProps} />
+          <YearView
+            formatMonth={formatMonth}
+            formatMonthYear={formatMonthYear}
+            classNames={{
+              ...classNames.year,
+              tile: mergeTileClassNames(classNames.tile, classNames.year?.tile),
+            }}
+            {...commonProps}
+          />
         );
       }
       case 'month': {
@@ -1077,6 +1119,10 @@ const Calendar = forwardRef(function Calendar(props: CalendarProps, ref) {
             }
             showNeighboringMonth={showNeighboringMonth}
             showWeekNumbers={showWeekNumbers}
+            classNames={{
+              ...classNames.month,
+              tile: mergeTileClassNames(classNames.tile, classNames.month?.tile),
+            }}
             {...commonProps}
           />
         );
@@ -1115,6 +1161,7 @@ const Calendar = forwardRef(function Calendar(props: CalendarProps, ref) {
         showDoubleView={showDoubleView}
         view={view}
         views={views}
+        classNames={classNames.navigation}
       />
     );
   }
@@ -1124,16 +1171,16 @@ const Calendar = forwardRef(function Calendar(props: CalendarProps, ref) {
   return (
     <div
       className={clsx(
-        baseClassName,
-        selectRange && valueArray.length === 1 && `${baseClassName}--selectRange`,
-        showDoubleView && `${baseClassName}--doubleView`,
-        className,
+        [baseClassName, className, classNames.base],
+        selectRange &&
+          valueArray.length === 1 && [`${baseClassName}--selectRange`, classNames.selectRange],
+        showDoubleView && [`${baseClassName}--doubleView`, classNames.doubleView],
       )}
       ref={inputRef}
     >
       {renderNavigation()}
       <div
-        className={`${baseClassName}__viewContainer`}
+        className={clsx(`${baseClassName}__viewContainer`, classNames.viewContainer)}
         onBlur={selectRange ? onMouseLeave : undefined}
         onMouseLeave={selectRange ? onMouseLeave : undefined}
       >
diff --git a/packages/react-calendar/src/Calendar/Navigation.tsx b/packages/react-calendar/src/Calendar/Navigation.tsx
index 2d8a726b..f2d3dcf4 100644
--- a/packages/react-calendar/src/Calendar/Navigation.tsx
+++ b/packages/react-calendar/src/Calendar/Navigation.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { getUserLocale } from 'get-user-locale';
+import clsx from 'clsx';
 
 import {
   getCenturyLabel,
@@ -18,11 +19,27 @@ import {
   formatYear as defaultFormatYear,
 } from '../shared/dateFormatter.js';
 
-import type { Action, NavigationLabelFunc, RangeType } from '../shared/types.js';
+import type { Action, ClassName, NavigationLabelFunc, RangeType } from '../shared/types.js';
 
 const className = 'react-calendar__navigation';
 
+const slotNames = [
+  'base',
+  'label',
+  'divider',
+  'labelText',
+  'labelTextFrom',
+  'labelTextTo',
+  'arrow',
+  'prev2Button',
+  'prevButton',
+  'nextButton',
+  'next2Button',
+] as const;
+type SlotName = (typeof slotNames)[number];
+
 type NavigationProps = {
+  classNames?: Partial<Record<SlotName, ClassName>>;
   /**
    * The beginning of a period that shall be displayed. If you wish to use react-calendar in an uncontrolled way, use `defaultActiveStartDate` instead.
    *
@@ -173,6 +190,7 @@ export default function Navigation({
   showDoubleView,
   view,
   views,
+  classNames = {},
 }: NavigationProps) {
   const drillUpAvailable = views.indexOf(view) > 0;
   const shouldShowPrevNext2Buttons = view !== 'century';
@@ -257,19 +275,33 @@ export default function Navigation({
       <button
         aria-label={navigationAriaLabel}
         aria-live={navigationAriaLive}
-        className={labelClassName}
+        className={clsx(labelClassName, classNames.label)}
         disabled={!drillUpAvailable}
         onClick={drillUp}
         style={{ flexGrow: 1 }}
         type="button"
       >
-        <span className={`${labelClassName}__labelText ${labelClassName}__labelText--from`}>
+        <span
+          className={clsx(
+            `${labelClassName}__labelText`,
+            `${labelClassName}__labelText--from`,
+            classNames.labelText,
+            classNames.labelTextFrom,
+          )}
+        >
           {renderLabel(activeStartDate)}
         </span>
         {showDoubleView ? (
           <>
-            <span className={`${labelClassName}__divider`}> – </span>
-            <span className={`${labelClassName}__labelText ${labelClassName}__labelText--to`}>
+            <span className={clsx(`${labelClassName}__divider`, classNames.divider)}> – </span>
+            <span
+              className={clsx(
+                `${labelClassName}__labelText`,
+                `${labelClassName}__labelText--to`,
+                classNames.labelText,
+                classNames.labelTextTo,
+              )}
+            >
               {renderLabel(nextActiveStartDate)}
             </span>
           </>
@@ -279,11 +311,16 @@ export default function Navigation({
   }
 
   return (
-    <div className={className}>
+    <div className={clsx(className, classNames.base)}>
       {prev2Label !== null && shouldShowPrevNext2Buttons ? (
         <button
           aria-label={prev2AriaLabel}
-          className={`${className}__arrow ${className}__prev2-button`}
+          className={clsx(
+            `${className}__arrow`,
+            `${className}__prev2-button`,
+            classNames.arrow,
+            classNames.prev2Button,
+          )}
           disabled={prev2ButtonDisabled}
           onClick={onClickPrevious2}
           type="button"
@@ -294,7 +331,12 @@ export default function Navigation({
       {prevLabel !== null && (
         <button
           aria-label={prevAriaLabel}
-          className={`${className}__arrow ${className}__prev-button`}
+          className={clsx(
+            `${className}__arrow`,
+            `${className}__prev-button`,
+            classNames.arrow,
+            classNames.prevButton,
+          )}
           disabled={prevButtonDisabled}
           onClick={onClickPrevious}
           type="button"
@@ -306,7 +348,12 @@ export default function Navigation({
       {nextLabel !== null && (
         <button
           aria-label={nextAriaLabel}
-          className={`${className}__arrow ${className}__next-button`}
+          className={clsx(
+            `${className}__arrow`,
+            `${className}__next-button`,
+            classNames.arrow,
+            classNames.nextButton,
+          )}
           disabled={nextButtonDisabled}
           onClick={onClickNext}
           type="button"
@@ -317,7 +364,12 @@ export default function Navigation({
       {next2Label !== null && shouldShowPrevNext2Buttons ? (
         <button
           aria-label={next2AriaLabel}
-          className={`${className}__arrow ${className}__next2-button`}
+          className={clsx(
+            `${className}__arrow`,
+            `${className}__next2-button`,
+            classNames.arrow,
+            classNames.next2Button,
+          )}
           disabled={next2ButtonDisabled}
           onClick={onClickNext2}
           type="button"
diff --git a/packages/react-calendar/src/CenturyView.spec.tsx b/packages/react-calendar/src/CenturyView.spec.tsx
index 79477503..00a87f95 100644
--- a/packages/react-calendar/src/CenturyView.spec.tsx
+++ b/packages/react-calendar/src/CenturyView.spec.tsx
@@ -44,7 +44,7 @@ describe('CenturyView', () => {
         return 'firstDayOfTheMonth';
       }
 
-      return null;
+      return;
     };
 
     const { container } = render(
diff --git a/packages/react-calendar/src/CenturyView.tsx b/packages/react-calendar/src/CenturyView.tsx
index 821b5f1f..bf73a43b 100644
--- a/packages/react-calendar/src/CenturyView.tsx
+++ b/packages/react-calendar/src/CenturyView.tsx
@@ -1,21 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
-import Decades from './CenturyView/Decades.js';
+import Decades, { slotNames as decadesSlotNames } from './CenturyView/Decades.js';
 
 import { tileGroupProps } from './shared/propTypes.js';
+import type { ClassName } from './shared/types.js';
+import { pickClassNames } from './shared/utils.js';
 
-type CenturyViewProps = React.ComponentProps<typeof Decades>;
+const localSlotNames = ['base'] as const;
+type LocalSlotName = (typeof localSlotNames)[number];
+
+type DecadesProps = React.ComponentProps<typeof Decades>;
+
+type CenturyViewProps = Omit<DecadesProps, 'classNames'> & {
+  classNames?: DecadesProps['classNames'] & Partial<Record<LocalSlotName, ClassName>>;
+};
 
 /**
  * Displays a given century.
  */
-const CenturyView: React.FC<CenturyViewProps> = function CenturyView(props) {
+const CenturyView: React.FC<CenturyViewProps> = function CenturyView({
+  classNames = {},
+  ...props
+}) {
   function renderDecades() {
-    return <Decades {...props} />;
+    return <Decades {...props} classNames={pickClassNames(classNames, decadesSlotNames)} />;
   }
 
-  return <div className="react-calendar__century-view">{renderDecades()}</div>;
+  return (
+    <div className={clsx('react-calendar__century-view', classNames.base)}>{renderDecades()}</div>
+  );
 };
 
 CenturyView.propTypes = {
diff --git a/packages/react-calendar/src/CenturyView/Decade.spec.tsx b/packages/react-calendar/src/CenturyView/Decade.spec.tsx
index bc489b50..018c3837 100644
--- a/packages/react-calendar/src/CenturyView/Decade.spec.tsx
+++ b/packages/react-calendar/src/CenturyView/Decade.spec.tsx
@@ -6,17 +6,21 @@ import Decade from './Decade.js';
 
 const tileProps = {
   activeStartDate: new Date(2018, 0, 1),
-  classes: ['react-calendar__tile'],
+  classNames: {
+    decadeTile: 'react-calendar__tile',
+  },
   currentCentury: 2001,
   date: new Date(2011, 0, 1),
-};
+} satisfies React.ComponentProps<typeof Decade>;
 
 describe('Decade', () => {
   it('applies given classNames properly', () => {
     const { container } = render(
       <Decade
         {...tileProps}
-        classes={['react-calendar__tile', 'react-calendar__tile--flag']}
+        classNames={{
+          decadeTile: ['react-calendar__tile', 'react-calendar__tile--flag'],
+        }}
         tileClassName={() => 'testFunctionClassName'}
       />,
     );
diff --git a/packages/react-calendar/src/CenturyView/Decade.tsx b/packages/react-calendar/src/CenturyView/Decade.tsx
index 92ef1d61..ddcaa5d0 100644
--- a/packages/react-calendar/src/CenturyView/Decade.tsx
+++ b/packages/react-calendar/src/CenturyView/Decade.tsx
@@ -1,15 +1,20 @@
 import React from 'react';
+import clsx from 'clsx';
 import { getDecadeStart, getDecadeEnd, getCenturyStart } from '@wojtekmaj/date-utils';
 
 import Tile from '../Tile.js';
 
 import { getDecadeLabel } from '../shared/dates.js';
 import { formatYear as defaultFormatYear } from '../shared/dateFormatter.js';
+import type { ClassName } from '../shared/types.js';
 
 const className = 'react-calendar__century-view__decades__decade';
 
+export const slotNames = ['decadeTile', 'neighbouringCenturyDecadeTile'] as const;
+type SlotName = (typeof slotNames)[number];
+
 type DecadeProps = {
-  classes?: string[];
+  classNames?: Partial<Record<SlotName, ClassName>>;
   currentCentury: number;
   /**
    *  Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function.
@@ -19,35 +24,28 @@ type DecadeProps = {
   formatYear?: typeof defaultFormatYear;
 } & Omit<
   React.ComponentProps<typeof Tile>,
-  'children' | 'maxDateTransform' | 'minDateTransform' | 'view'
+  'children' | 'maxDateTransform' | 'minDateTransform' | 'view' | 'className'
 >;
 
 export default function Decade({
-  classes = [],
+  classNames = {},
   currentCentury,
   formatYear = defaultFormatYear,
   ...otherProps
 }: DecadeProps) {
   const { date, locale } = otherProps;
 
-  const classesProps: string[] = [];
-
-  if (classes) {
-    classesProps.push(...classes);
-  }
-
-  if (className) {
-    classesProps.push(className);
-  }
-
-  if (getCenturyStart(date).getFullYear() !== currentCentury) {
-    classesProps.push(`${className}--neighboringCentury`);
-  }
-
   return (
     <Tile
       {...otherProps}
-      classes={classesProps}
+      className={clsx(
+        className,
+        classNames.decadeTile,
+        getCenturyStart(date).getFullYear() !== currentCentury && [
+          `${className}--neighboringCentury`,
+          classNames.neighbouringCenturyDecadeTile,
+        ],
+      )}
       maxDateTransform={getDecadeEnd}
       minDateTransform={getDecadeStart}
       view="century"
diff --git a/packages/react-calendar/src/CenturyView/Decades.tsx b/packages/react-calendar/src/CenturyView/Decades.tsx
index 553cc3d4..79905a1b 100644
--- a/packages/react-calendar/src/CenturyView/Decades.tsx
+++ b/packages/react-calendar/src/CenturyView/Decades.tsx
@@ -1,12 +1,24 @@
 import React from 'react';
 import { getDecadeStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup.js';
-import Decade from './Decade.js';
+import TileGroup, { slotNames as tileGroupSlotNames } from '../TileGroup.js';
+import Decade, { slotNames as decadeSlotNames } from './Decade.js';
 
 import { getBeginOfCenturyYear } from '../shared/dates.js';
+import type { ClassName } from '../shared/types.js';
+import { pickClassNames } from '../shared/utils.js';
+
+const localSlotNames = ['decadesView'] as const;
+type LocalSlotName = (typeof localSlotNames)[number];
+export const slotNames = ['decadesView', ...tileGroupSlotNames, ...decadeSlotNames] as const;
+
+type DecadeProps = React.ComponentProps<typeof Decade>;
+type TileGroupProps = React.ComponentProps<typeof TileGroup>;
 
 type DecadesProps = {
+  classNames?: DecadeProps['classNames'] &
+    TileGroupProps['classNames'] &
+    Partial<Record<LocalSlotName, ClassName>>;
   /**
    * The beginning of a period that shall be displayed.
    *
@@ -21,28 +33,49 @@ type DecadesProps = {
    */
   showNeighboringCentury?: boolean;
 } & Omit<
-  React.ComponentProps<typeof TileGroup>,
-  'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start'
+  TileGroupProps,
+  'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start' | 'classNames'
 > &
-  Omit<React.ComponentProps<typeof Decade>, 'classes' | 'currentCentury' | 'date'>;
+  Omit<DecadeProps, 'currentCentury' | 'date' | 'classNames'>;
 
 export default function Decades(props: DecadesProps) {
-  const { activeStartDate, hover, showNeighboringCentury, value, valueType, ...otherProps } = props;
+  const {
+    activeStartDate,
+    hover,
+    showNeighboringCentury,
+    value,
+    valueType,
+    classNames = {},
+    ...otherProps
+  } = props;
   const start = getBeginOfCenturyYear(activeStartDate);
   const end = start + (showNeighboringCentury ? 119 : 99);
 
   return (
     <TileGroup
-      className="react-calendar__century-view__decades"
+      classNames={pickClassNames(
+        {
+          ...classNames,
+          tileGroup: [
+            'react-calendar__century-view__decades',
+            classNames.tileGroup,
+            classNames.decadesView,
+          ],
+        },
+        tileGroupSlotNames,
+      )}
       dateTransform={getDecadeStart}
       dateType="decade"
       end={end}
       hover={hover}
-      renderTile={({ date, ...otherTileProps }) => (
+      renderTile={({ date, className }) => (
         <Decade
           key={date.getTime()}
+          classNames={pickClassNames(
+            { ...classNames, decadeTile: [classNames.decadeTile, className] },
+            decadeSlotNames,
+          )}
           {...otherProps}
-          {...otherTileProps}
           activeStartDate={activeStartDate}
           currentCentury={start}
           date={date}
diff --git a/packages/react-calendar/src/DecadeView.spec.tsx b/packages/react-calendar/src/DecadeView.spec.tsx
index 0d8ddbe6..265cc572 100644
--- a/packages/react-calendar/src/DecadeView.spec.tsx
+++ b/packages/react-calendar/src/DecadeView.spec.tsx
@@ -39,7 +39,7 @@ describe('DecadeView', () => {
         return 'firstDayOfTheMonth';
       }
 
-      return null;
+      return;
     };
 
     const { container } = render(
diff --git a/packages/react-calendar/src/DecadeView.tsx b/packages/react-calendar/src/DecadeView.tsx
index e3a67d30..e976b813 100644
--- a/packages/react-calendar/src/DecadeView.tsx
+++ b/packages/react-calendar/src/DecadeView.tsx
@@ -1,21 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
-import Years from './DecadeView/Years.js';
+import Years, { slotNames as yearsSlotNames } from './DecadeView/Years.js';
 
 import { tileGroupProps } from './shared/propTypes.js';
+import type { ClassName } from './shared/types.js';
+import { pickClassNames } from './shared/utils.js';
 
-type DecadeViewProps = React.ComponentProps<typeof Years>;
+const localSlotName = ['base'] as const;
+type LocalSlotName = (typeof localSlotName)[number];
+export const slotNames = [...localSlotName, ...yearsSlotNames] as const;
+
+type YearsProps = React.ComponentProps<typeof Years>;
+
+type DecadeViewProps = Omit<YearsProps, 'classNames'> & {
+  classNames?: YearsProps['classNames'] & Partial<Record<LocalSlotName, ClassName>>;
+};
 
 /**
  * Displays a given decade.
  */
-const DecadeView: React.FC<DecadeViewProps> = function DecadeView(props) {
+const DecadeView: React.FC<DecadeViewProps> = function DecadeView({ classNames = {}, ...props }) {
   function renderYears() {
-    return <Years {...props} />;
+    return <Years {...props} classNames={pickClassNames(classNames, yearsSlotNames)} />;
   }
 
-  return <div className="react-calendar__decade-view">{renderYears()}</div>;
+  return (
+    <div className={clsx('react-calendar__decade-view', classNames.base)}>{renderYears()}</div>
+  );
 };
 
 DecadeView.propTypes = {
diff --git a/packages/react-calendar/src/DecadeView/Year.spec.tsx b/packages/react-calendar/src/DecadeView/Year.spec.tsx
index bb46e670..fdc48a2a 100644
--- a/packages/react-calendar/src/DecadeView/Year.spec.tsx
+++ b/packages/react-calendar/src/DecadeView/Year.spec.tsx
@@ -6,17 +6,21 @@ import Year from './Year.js';
 
 const tileProps = {
   activeStartDate: new Date(2018, 0, 1),
-  classes: ['react-calendar__tile'],
+  classNames: {
+    yearTile: 'react-calendar__tile',
+  },
   currentDecade: 2011,
   date: new Date(2018, 0, 1),
-};
+} satisfies React.ComponentProps<typeof Year>;
 
 describe('Year', () => {
   it('applies given classNames properly', () => {
     const { container } = render(
       <Year
         {...tileProps}
-        classes={['react-calendar__tile', 'react-calendar__tile--flag']}
+        classNames={{
+          yearTile: ['react-calendar__tile', 'react-calendar__tile--flag'],
+        }}
         tileClassName={() => 'testFunctionClassName'}
       />,
     );
diff --git a/packages/react-calendar/src/DecadeView/Year.tsx b/packages/react-calendar/src/DecadeView/Year.tsx
index e7b9b8ae..deb43893 100644
--- a/packages/react-calendar/src/DecadeView/Year.tsx
+++ b/packages/react-calendar/src/DecadeView/Year.tsx
@@ -4,11 +4,15 @@ import { getYearStart, getYearEnd, getDecadeStart } from '@wojtekmaj/date-utils'
 import Tile from '../Tile.js';
 
 import { formatYear as defaultFormatYear } from '../shared/dateFormatter.js';
+import type { ClassName } from '../shared/types.js';
 
 const className = 'react-calendar__decade-view__years__year';
 
+export const slotNames = ['yearTile', 'neighbouringDecadeYearTile'] as const;
+type SlotName = (typeof slotNames)[number];
+
 type YearProps = {
-  classes?: string[];
+  classNames?: Partial<Record<SlotName, ClassName>>;
   currentDecade: number;
   /**
    *  Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function.
@@ -18,35 +22,27 @@ type YearProps = {
   formatYear?: typeof defaultFormatYear;
 } & Omit<
   React.ComponentProps<typeof Tile>,
-  'children' | 'maxDateTransform' | 'minDateTransform' | 'view'
+  'children' | 'maxDateTransform' | 'minDateTransform' | 'view' | 'className'
 >;
 
 export default function Year({
-  classes = [],
+  classNames = {},
   currentDecade,
   formatYear = defaultFormatYear,
   ...otherProps
 }: YearProps) {
   const { date, locale } = otherProps;
 
-  const classesProps: string[] = [];
-
-  if (classes) {
-    classesProps.push(...classes);
-  }
-
-  if (className) {
-    classesProps.push(className);
-  }
-
-  if (getDecadeStart(date).getFullYear() !== currentDecade) {
-    classesProps.push(`${className}--neighboringDecade`);
-  }
-
   return (
     <Tile
       {...otherProps}
-      classes={classesProps}
+      className={[
+        className,
+        classNames.yearTile,
+        getDecadeStart(date).getFullYear() !== currentDecade
+          ? [`${className}--neighboringDecade`, classNames.neighbouringDecadeYearTile]
+          : undefined,
+      ]}
       maxDateTransform={getYearEnd}
       minDateTransform={getYearStart}
       view="decade"
diff --git a/packages/react-calendar/src/DecadeView/Years.tsx b/packages/react-calendar/src/DecadeView/Years.tsx
index 5be6fec1..61983913 100644
--- a/packages/react-calendar/src/DecadeView/Years.tsx
+++ b/packages/react-calendar/src/DecadeView/Years.tsx
@@ -1,12 +1,24 @@
 import React from 'react';
 import { getYearStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup.js';
-import Year from './Year.js';
+import TileGroup, { slotNames as tileGroupSlotNames } from '../TileGroup.js';
+import Year, { slotNames as yearSlotNames } from './Year.js';
 
 import { getBeginOfDecadeYear } from '../shared/dates.js';
+import type { ClassName } from '../shared/types.js';
+import { pickClassNames } from '../shared/utils.js';
+
+type TileGroupProps = React.ComponentProps<typeof TileGroup>;
+type YearProps = React.ComponentProps<typeof Year>;
+
+const localSlotName = ['yearsView'] as const;
+type LocalSlotName = (typeof localSlotName)[number];
+export const slotNames = [...localSlotName, ...tileGroupSlotNames, ...yearSlotNames] as const;
 
 type YearsProps = {
+  classNames?: TileGroupProps['classNames'] &
+    YearProps['classNames'] &
+    Partial<Record<LocalSlotName, ClassName>>;
   /**
    * The beginning of a period that shall be displayed.
    *
@@ -21,28 +33,49 @@ type YearsProps = {
    */
   showNeighboringDecade?: boolean;
 } & Omit<
-  React.ComponentProps<typeof TileGroup>,
-  'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start'
+  TileGroupProps,
+  'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start' | 'classNames'
 > &
-  Omit<React.ComponentProps<typeof Year>, 'classes' | 'currentDecade' | 'date'>;
+  Omit<YearProps, 'currentDecade' | 'date' | 'classNames'>;
 
 export default function Years(props: YearsProps) {
-  const { activeStartDate, hover, showNeighboringDecade, value, valueType, ...otherProps } = props;
+  const {
+    activeStartDate,
+    hover,
+    showNeighboringDecade,
+    value,
+    valueType,
+    classNames = {},
+    ...otherProps
+  } = props;
   const start = getBeginOfDecadeYear(activeStartDate);
   const end = start + (showNeighboringDecade ? 11 : 9);
 
   return (
     <TileGroup
-      className="react-calendar__decade-view__years"
+      classNames={pickClassNames(
+        {
+          ...classNames,
+          tileGroup: [
+            'react-calendar__decade-view__years',
+            classNames.tileGroup,
+            classNames.yearsView,
+          ],
+        },
+        tileGroupSlotNames,
+      )}
       dateTransform={getYearStart}
       dateType="year"
       end={end}
       hover={hover}
-      renderTile={({ date, ...otherTileProps }) => (
+      renderTile={({ date, className }) => (
         <Year
           key={date.getTime()}
+          classNames={pickClassNames(
+            { ...classNames, yearTile: [classNames.yearTile, className] },
+            yearSlotNames,
+          )}
           {...otherProps}
-          {...otherTileProps}
           activeStartDate={activeStartDate}
           currentDecade={start}
           date={date}
diff --git a/packages/react-calendar/src/Flex.tsx b/packages/react-calendar/src/Flex.tsx
index 5578bc66..7c278a53 100644
--- a/packages/react-calendar/src/Flex.tsx
+++ b/packages/react-calendar/src/Flex.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
+import clsx from 'clsx';
 
-type FlexProps = React.HTMLAttributes<HTMLDivElement> & {
+import type { ClassName } from './shared/types.js';
+
+type FlexProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   children: React.ReactElement[];
-  className?: string;
+  className?: ClassName;
   count: number;
   direction?: 'row' | 'column';
   offset?: number;
@@ -26,7 +29,7 @@ export default function Flex({
 }: FlexProps) {
   return (
     <div
-      className={className}
+      className={clsx(className)}
       style={{
         display: 'flex',
         flexDirection: direction,
diff --git a/packages/react-calendar/src/MonthView.spec.tsx b/packages/react-calendar/src/MonthView.spec.tsx
index fa3e0a21..9a8a6996 100644
--- a/packages/react-calendar/src/MonthView.spec.tsx
+++ b/packages/react-calendar/src/MonthView.spec.tsx
@@ -53,7 +53,7 @@ describe('MonthView', () => {
         return 'firstDayOfTheMonth';
       }
 
-      return null;
+      return;
     };
 
     const { container } = render(
diff --git a/packages/react-calendar/src/MonthView.tsx b/packages/react-calendar/src/MonthView.tsx
index ae514623..fc404eb0 100644
--- a/packages/react-calendar/src/MonthView.tsx
+++ b/packages/react-calendar/src/MonthView.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import Days from './MonthView/Days.js';
-import Weekdays from './MonthView/Weekdays.js';
-import WeekNumbers from './MonthView/WeekNumbers.js';
+import Days, { slotNames as daysSlotNames } from './MonthView/Days.js';
+import Weekdays, { slotNames as weekdaysSlotNames } from './MonthView/Weekdays.js';
+import WeekNumbers, { slotNames as weekNumbersSlotNames } from './MonthView/WeekNumbers.js';
 
 import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const.js';
 import { isCalendarType, tileGroupProps } from './shared/propTypes.js';
 
-import type { CalendarType, DeprecatedCalendarType } from './shared/types.js';
+import type { CalendarType, ClassName, DeprecatedCalendarType } from './shared/types.js';
+import { pickClassNames } from './shared/utils.js';
 
 function getCalendarTypeFromLocale(locale: string | undefined): CalendarType {
   if (locale) {
@@ -23,7 +24,27 @@ function getCalendarTypeFromLocale(locale: string | undefined): CalendarType {
   return CALENDAR_TYPES.ISO_8601;
 }
 
+const className = 'react-calendar__month-view';
+
+const localSlotName = ['monthView', 'weekNumbersMonthView'] as const;
+type LocalSlotName = (typeof localSlotName)[number];
+
+export const slotNames = [
+  ...localSlotName,
+  ...daysSlotNames,
+  ...weekdaysSlotNames,
+  ...weekNumbersSlotNames,
+] as const;
+
+type WeekdaysProps = React.ComponentProps<typeof Weekdays>;
+type WeekNumbersProps = React.ComponentProps<typeof WeekNumbers>;
+type DaysProps = React.ComponentProps<typeof Days>;
+
 type MonthViewProps = {
+  classNames?: WeekdaysProps['classNames'] &
+    WeekNumbersProps['classNames'] &
+    DaysProps['classNames'] &
+    Partial<Record<LocalSlotName, ClassName>>;
   /**
    * Type of calendar that should be used. Can be `'gregory`, `'hebrew'`, `'islamic'`, `'iso8601'`. Setting to `"gregory"` or `"hebrew"` will change the first day of the week to Sunday. Setting to `"islamic"` will change the first day of the week to Saturday. Setting to `"islamic"` or `"hebrew"` will make weekends appear on Friday to Saturday.
    *
@@ -38,9 +59,9 @@ type MonthViewProps = {
    */
   showWeekNumbers?: boolean;
 } & Omit<
-  React.ComponentProps<typeof Weekdays> &
-    React.ComponentProps<typeof WeekNumbers> &
-    React.ComponentProps<typeof Days>,
+  Omit<WeekdaysProps, 'classNames'> &
+    Omit<WeekNumbersProps, 'classNames'> &
+    Omit<DaysProps, 'classNames'>,
   'calendarType'
 >;
 
@@ -48,7 +69,7 @@ type MonthViewProps = {
  * Displays a given month.
  */
 const MonthView: React.FC<MonthViewProps> = function MonthView(props) {
-  const { activeStartDate, locale, onMouseLeave, showFixedNumberOfWeeks } = props;
+  const { activeStartDate, locale, onMouseLeave, showFixedNumberOfWeeks, classNames = {} } = props;
   const {
     calendarType = getCalendarTypeFromLocale(locale),
     formatShortWeekday,
@@ -66,6 +87,7 @@ const MonthView: React.FC<MonthViewProps> = function MonthView(props) {
         formatWeekday={formatWeekday}
         locale={locale}
         onMouseLeave={onMouseLeave}
+        classNames={pickClassNames(classNames, weekdaysSlotNames)}
       />
     );
   }
@@ -82,18 +104,29 @@ const MonthView: React.FC<MonthViewProps> = function MonthView(props) {
         onClickWeekNumber={onClickWeekNumber}
         onMouseLeave={onMouseLeave}
         showFixedNumberOfWeeks={showFixedNumberOfWeeks}
+        classNames={pickClassNames(classNames, weekNumbersSlotNames)}
       />
     );
   }
 
   function renderDays() {
-    return <Days calendarType={calendarType} {...childProps} />;
+    return (
+      <Days
+        calendarType={calendarType}
+        classNames={pickClassNames(classNames, daysSlotNames)}
+        {...childProps}
+      />
+    );
   }
 
-  const className = 'react-calendar__month-view';
-
   return (
-    <div className={clsx(className, showWeekNumbers ? `${className}--weekNumbers` : '')}>
+    <div
+      className={clsx(
+        className,
+        classNames.monthView,
+        showWeekNumbers ? [`${className}--weekNumbers`, classNames.weekNumbersMonthView] : '',
+      )}
+    >
       <div
         style={{
           display: 'flex',
diff --git a/packages/react-calendar/src/MonthView/Day.spec.tsx b/packages/react-calendar/src/MonthView/Day.spec.tsx
index 69447d50..f74a45f2 100644
--- a/packages/react-calendar/src/MonthView/Day.spec.tsx
+++ b/packages/react-calendar/src/MonthView/Day.spec.tsx
@@ -7,7 +7,9 @@ import Day from './Day.js';
 const tileProps = {
   activeStartDate: new Date(2018, 0, 1),
   calendarType: 'iso8601',
-  classes: ['react-calendar__tile'],
+  classNames: {
+    dayTile: 'react-calendar__tile',
+  },
   currentMonthIndex: 0,
   date: new Date(2018, 0, 1),
 } satisfies React.ComponentProps<typeof Day>;
@@ -17,7 +19,9 @@ describe('Day', () => {
     const { container } = render(
       <Day
         {...tileProps}
-        classes={['react-calendar__tile', 'react-calendar__tile--flag']}
+        classNames={{
+          dayTile: ['react-calendar__tile', 'react-calendar__tile--flag'],
+        }}
         tileClassName={() => 'testFunctionClassName'}
       />,
     );
diff --git a/packages/react-calendar/src/MonthView/Day.tsx b/packages/react-calendar/src/MonthView/Day.tsx
index 5248b9cc..0bd85cdb 100644
--- a/packages/react-calendar/src/MonthView/Day.tsx
+++ b/packages/react-calendar/src/MonthView/Day.tsx
@@ -10,18 +10,21 @@ import {
 } from '../shared/dateFormatter.js';
 import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
+import type { CalendarType, ClassName, DeprecatedCalendarType } from '../shared/types.js';
 
 const className = 'react-calendar__month-view__days__day';
 
+export const slotNames = ['dayTile', 'weekendDayTile', 'neighbouringMonthDayTile'] as const;
+type SlotName = (typeof slotNames)[number];
+
 type DayProps = {
+  classNames?: Partial<Record<SlotName, ClassName>>;
   /**
    * Type of calendar that should be used. Can be `'gregory`, `'hebrew'`, `'islamic'`, `'iso8601'`. Setting to `"gregory"` or `"hebrew"` will change the first day of the week to Sunday. Setting to `"islamic"` will change the first day of the week to Saturday. Setting to `"islamic"` or `"hebrew"` will make weekends appear on Friday to Saturday.
    *
    * @example 'iso8601'
    */
   calendarType: CalendarType | DeprecatedCalendarType | undefined;
-  classes?: string[];
   currentMonthIndex: number;
   /**
    * Function called to override default formatting of day tile labels. Can be used to use your own formatting function.
@@ -37,12 +40,12 @@ type DayProps = {
   formatLongDate?: typeof defaultFormatLongDate;
 } & Omit<
   React.ComponentProps<typeof Tile>,
-  'children' | 'formatAbbr' | 'maxDateTransform' | 'minDateTransform' | 'view'
+  'children' | 'formatAbbr' | 'maxDateTransform' | 'minDateTransform' | 'view' | 'className'
 >;
 
 export default function Day({
   calendarType: calendarTypeOrDeprecatedCalendarType,
-  classes = [],
+  classNames = {},
   currentMonthIndex,
   formatDay = defaultFormatDay,
   formatLongDate = defaultFormatLongDate,
@@ -51,28 +54,19 @@ export default function Day({
   const calendarType = mapCalendarType(calendarTypeOrDeprecatedCalendarType);
   const { date, locale } = otherProps;
 
-  const classesProps: string[] = [];
-
-  if (classes) {
-    classesProps.push(...classes);
-  }
-
-  if (className) {
-    classesProps.push(className);
-  }
-
-  if (isWeekend(date, calendarType)) {
-    classesProps.push(`${className}--weekend`);
-  }
-
-  if (date.getMonth() !== currentMonthIndex) {
-    classesProps.push(`${className}--neighboringMonth`);
-  }
-
   return (
     <Tile
       {...otherProps}
-      classes={classesProps}
+      className={[
+        className,
+        classNames.dayTile,
+        isWeekend(date, calendarType)
+          ? [`${className}--weekend`, classNames.weekendDayTile]
+          : undefined,
+        date.getMonth() !== currentMonthIndex
+          ? [`${className}--neighboringMonth`, classNames.neighbouringMonthDayTile]
+          : undefined,
+      ]}
       formatAbbr={formatLongDate}
       maxDateTransform={getDayEnd}
       minDateTransform={getDayStart}
diff --git a/packages/react-calendar/src/MonthView/Days.tsx b/packages/react-calendar/src/MonthView/Days.tsx
index 64502b07..eb947b0e 100644
--- a/packages/react-calendar/src/MonthView/Days.tsx
+++ b/packages/react-calendar/src/MonthView/Days.tsx
@@ -1,15 +1,25 @@
 import React from 'react';
 import { getYear, getMonth, getDaysInMonth, getDayStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup.js';
-import Day from './Day.js';
+import TileGroup, { slotNames as tileGroupSlotNames } from '../TileGroup.js';
+import Day, { slotNames as daySlotNames } from './Day.js';
 
 import { getDayOfWeek } from '../shared/dates.js';
-import { mapCalendarType } from '../shared/utils.js';
+import { mapCalendarType, pickClassNames } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
+import type { CalendarType, ClassName, DeprecatedCalendarType } from '../shared/types.js';
+
+type TileGroupProps = React.ComponentProps<typeof TileGroup>;
+type DayProps = React.ComponentProps<typeof Day>;
+
+const localSlotName = ['daysView'] as const;
+type LocalSlotName = (typeof localSlotName)[number];
+export const slotNames = [...localSlotName, ...tileGroupSlotNames, ...daySlotNames] as const;
 
 type DaysProps = {
+  classNames?: TileGroupProps['classNames'] &
+    DayProps['classNames'] &
+    Partial<Record<LocalSlotName, ClassName>>;
   /**
    * The beginning of a period that shall be displayed.
    *
@@ -37,10 +47,10 @@ type DaysProps = {
    */
   showNeighboringMonth?: boolean;
 } & Omit<
-  React.ComponentProps<typeof TileGroup>,
-  'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start'
+  TileGroupProps,
+  'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start' | 'classNames'
 > &
-  Omit<React.ComponentProps<typeof Day>, 'classes' | 'currentMonthIndex' | 'date' | 'point'>;
+  Omit<DayProps, 'currentMonthIndex' | 'date' | 'point' | 'classNames'>;
 
 export default function Days(props: DaysProps) {
   const {
@@ -51,6 +61,7 @@ export default function Days(props: DaysProps) {
     showNeighboringMonth,
     value,
     valueType,
+    classNames = {},
     ...otherProps
   } = props;
 
@@ -96,7 +107,17 @@ export default function Days(props: DaysProps) {
 
   return (
     <TileGroup
-      className="react-calendar__month-view__days"
+      classNames={pickClassNames(
+        {
+          ...classNames,
+          tileGroup: [
+            'react-calendar__month-view__days',
+            classNames.tileGroup,
+            classNames.daysView,
+          ],
+        },
+        tileGroupSlotNames,
+      )}
       count={7}
       dateTransform={(day) => {
         const date = new Date();
@@ -106,11 +127,14 @@ export default function Days(props: DaysProps) {
       dateType="day"
       hover={hover}
       end={end}
-      renderTile={({ date, ...otherTileProps }) => (
+      renderTile={({ date, className }) => (
         <Day
           key={date.getTime()}
+          classNames={pickClassNames(
+            { ...classNames, dayTile: [classNames.dayTile, className] },
+            daySlotNames,
+          )}
           {...otherProps}
-          {...otherTileProps}
           activeStartDate={activeStartDate}
           calendarType={calendarTypeOrDeprecatedCalendarType}
           currentMonthIndex={monthIndex}
diff --git a/packages/react-calendar/src/MonthView/WeekNumber.tsx b/packages/react-calendar/src/MonthView/WeekNumber.tsx
index 1c7eaf43..b09c13d9 100644
--- a/packages/react-calendar/src/MonthView/WeekNumber.tsx
+++ b/packages/react-calendar/src/MonthView/WeekNumber.tsx
@@ -1,26 +1,28 @@
 import React from 'react';
+import clsx from 'clsx';
 
-import type { OnClickWeekNumberFunc } from '../shared/types.js';
+import type { ClassName, OnClickWeekNumberFunc } from '../shared/types.js';
 
 const className = 'react-calendar__tile';
 
-type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'className'> & {
   onClickWeekNumber: OnClickWeekNumberFunc;
 };
 
-type DivProps = React.HTMLAttributes<HTMLDivElement> & {
+type DivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   onClickWeekNumber?: undefined;
 };
 
 type WeekNumberProps<T = OnClickWeekNumberFunc | undefined> = (T extends OnClickWeekNumberFunc
   ? ButtonProps
   : DivProps) & {
+  className?: ClassName;
   date: Date;
   weekNumber: number;
 };
 
 export default function WeekNumber(props: WeekNumberProps) {
-  const { onClickWeekNumber, weekNumber } = props;
+  const { onClickWeekNumber, weekNumber, className: externalClassName } = props;
 
   const children = <span>{weekNumber}</span>;
 
@@ -30,7 +32,7 @@ export default function WeekNumber(props: WeekNumberProps) {
     return (
       <button
         {...otherProps}
-        className={className}
+        className={clsx(className, externalClassName)}
         onClick={(event) => onClickWeekNumber(weekNumber, date, event)}
         type="button"
       >
@@ -41,7 +43,7 @@ export default function WeekNumber(props: WeekNumberProps) {
     const { date, onClickWeekNumber, weekNumber, ...otherProps } = props;
 
     return (
-      <div {...otherProps} className={className}>
+      <div {...otherProps} className={clsx(className, externalClassName)}>
         {children}
       </div>
     );
diff --git a/packages/react-calendar/src/MonthView/WeekNumbers.tsx b/packages/react-calendar/src/MonthView/WeekNumbers.tsx
index bfc94587..91dcc183 100644
--- a/packages/react-calendar/src/MonthView/WeekNumbers.tsx
+++ b/packages/react-calendar/src/MonthView/WeekNumbers.tsx
@@ -9,11 +9,16 @@ import { mapCalendarType } from '../shared/utils.js';
 
 import type {
   CalendarType,
+  ClassName,
   DeprecatedCalendarType,
   OnClickWeekNumberFunc,
 } from '../shared/types.js';
 
+export const slotNames = ['weekNumbersView', 'weekNumberView'] as const;
+type SlotName = (typeof slotNames)[number];
+
 type WeekNumbersProps = {
+  classNames?: Partial<Record<SlotName, ClassName>>;
   /**
    * The beginning of a period that shall be displayed.
    *
@@ -49,6 +54,7 @@ export default function WeekNumbers(props: WeekNumbersProps) {
     onClickWeekNumber,
     onMouseLeave,
     showFixedNumberOfWeeks,
+    classNames = {},
   } = props;
 
   const calendarType = mapCalendarType(calendarTypeOrDeprecatedCalendarType);
@@ -80,7 +86,7 @@ export default function WeekNumbers(props: WeekNumbersProps) {
 
   return (
     <Flex
-      className="react-calendar__month-view__weekNumbers"
+      className={['react-calendar__month-view__weekNumbers', classNames.weekNumbersView]}
       count={numberOfWeeks}
       direction="column"
       onFocus={onMouseLeave}
@@ -100,6 +106,7 @@ export default function WeekNumbers(props: WeekNumbersProps) {
             date={date}
             onClickWeekNumber={onClickWeekNumber}
             weekNumber={weekNumber}
+            className={classNames.weekNumberView}
           />
         );
       })}
diff --git a/packages/react-calendar/src/MonthView/Weekdays.tsx b/packages/react-calendar/src/MonthView/Weekdays.tsx
index 9a26af42..06472f6c 100644
--- a/packages/react-calendar/src/MonthView/Weekdays.tsx
+++ b/packages/react-calendar/src/MonthView/Weekdays.tsx
@@ -11,12 +11,21 @@ import {
 } from '../shared/dateFormatter.js';
 import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
+import type { CalendarType, ClassName, DeprecatedCalendarType } from '../shared/types.js';
 
 const className = 'react-calendar__month-view__weekdays';
 const weekdayClassName = `${className}__weekday`;
 
+export const slotNames = [
+  'weekdayView',
+  'weekdayCurrentView',
+  'weekdayWeekendView',
+  'weekdaysView',
+] as const;
+type SlotName = (typeof slotNames)[number];
+
 type WeekdaysProps = {
+  classNames?: Partial<Record<SlotName, ClassName>>;
   /**
    * Type of calendar that should be used. Can be `'gregory`, `'hebrew'`, `'islamic'`, `'iso8601'`. Setting to `"gregory"` or `"hebrew"` will change the first day of the week to Sunday. Setting to `"islamic"` will change the first day of the week to Saturday. Setting to `"islamic"` or `"hebrew"` will make weekends appear on Friday to Saturday.
    *
@@ -51,6 +60,7 @@ export default function Weekdays(props: WeekdaysProps) {
     formatWeekday = defaultFormatWeekday,
     locale,
     onMouseLeave,
+    classNames = {},
   } = props;
 
   const calendarType = mapCalendarType(calendarTypeOrDeprecatedCalendarType);
@@ -75,8 +85,15 @@ export default function Weekdays(props: WeekdaysProps) {
         key={weekday}
         className={clsx(
           weekdayClassName,
-          isCurrentDayOfWeek(weekdayDate) && `${weekdayClassName}--current`,
-          isWeekend(weekdayDate, calendarType) && `${weekdayClassName}--weekend`,
+          classNames.weekdayView,
+          isCurrentDayOfWeek(weekdayDate) && [
+            `${weekdayClassName}--current`,
+            classNames.weekdayCurrentView,
+          ],
+          isWeekend(weekdayDate, calendarType) && [
+            `${weekdayClassName}--weekend`,
+            classNames.weekdayWeekendView,
+          ],
         )}
       >
         <abbr aria-label={abbr} title={abbr}>
@@ -87,7 +104,12 @@ export default function Weekdays(props: WeekdaysProps) {
   }
 
   return (
-    <Flex className={className} count={7} onFocus={onMouseLeave} onMouseOver={onMouseLeave}>
+    <Flex
+      className={[className, classNames.weekdaysView]}
+      count={7}
+      onFocus={onMouseLeave}
+      onMouseOver={onMouseLeave}
+    >
       {weekdays}
     </Flex>
   );
diff --git a/packages/react-calendar/src/Tile.spec.tsx b/packages/react-calendar/src/Tile.spec.tsx
index 1d44595a..2ce9cc8e 100644
--- a/packages/react-calendar/src/Tile.spec.tsx
+++ b/packages/react-calendar/src/Tile.spec.tsx
@@ -8,7 +8,6 @@ describe('<Tile /> component', () => {
   const defaultProps = {
     activeStartDate: new Date(2019, 0, 1),
     children: '',
-    classes: [],
     date: new Date(2019, 0, 1),
     maxDateTransform: (date: Date) => date,
     minDateTransform: (date: Date) => date,
@@ -33,14 +32,14 @@ describe('<Tile /> component', () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('passes classes to button properly', () => {
-    const classes = ['a', 'b', 'c'];
+  it('passes classNames to button properly', () => {
+    const classNames = ['a', 'b', 'c'];
 
-    const { container } = render(<Tile {...defaultProps} classes={classes} />);
+    const { container } = render(<Tile {...defaultProps} className={classNames} />);
 
     const button = container.querySelector('button');
 
-    classes.forEach((className) => {
+    classNames.forEach((className) => {
       expect(button).toHaveClass(className);
     });
   });
diff --git a/packages/react-calendar/src/Tile.tsx b/packages/react-calendar/src/Tile.tsx
index 343e50b5..29961b0f 100644
--- a/packages/react-calendar/src/Tile.tsx
+++ b/packages/react-calendar/src/Tile.tsx
@@ -17,7 +17,7 @@ type TileProps = {
    */
   activeStartDate: Date;
   children: React.ReactNode;
-  classes?: string[];
+  className?: ClassName;
   date: Date;
   formatAbbr?: (locale: string | undefined, date: Date) => string;
   /**
@@ -78,7 +78,7 @@ export default function Tile(props: TileProps) {
   const {
     activeStartDate,
     children,
-    classes,
+    className,
     date,
     formatAbbr,
     locale,
@@ -109,7 +109,7 @@ export default function Tile(props: TileProps) {
 
   return (
     <button
-      className={clsx(classes, tileClassName)}
+      className={clsx(className, tileClassName)}
       disabled={
         (minDate && minDateTransform(minDate) > date) ||
         (maxDate && maxDateTransform(maxDate) < date) ||
diff --git a/packages/react-calendar/src/TileGroup.tsx b/packages/react-calendar/src/TileGroup.tsx
index 36c14ca1..5e4b73cc 100644
--- a/packages/react-calendar/src/TileGroup.tsx
+++ b/packages/react-calendar/src/TileGroup.tsx
@@ -2,19 +2,25 @@ import React from 'react';
 
 import Flex from './Flex.js';
 
-import { getTileClasses } from './shared/utils.js';
+import { getTileClassName, type TileClassNames } from './shared/utils.js';
 
-import type { RangeType, Value } from './shared/types.js';
+import type { ClassName, RangeType, Value } from './shared/types.js';
+
+export const slotNames = ['tileGroup', 'tile'] as const;
+export type SlotName = (typeof slotNames)[number];
 
 type TileGroupProps = {
-  className?: string;
+  classNames?: {
+    tileGroup?: ClassName;
+    tile?: TileClassNames;
+  };
   count?: number;
   dateTransform: (point: number) => Date;
   dateType: RangeType;
   end: number;
   hover?: Date | null;
   offset?: number;
-  renderTile: (props: { classes: string[]; date: Date }) => React.ReactElement;
+  renderTile: (props: { className: ClassName; date: Date }) => React.ReactElement;
   start: number;
   step?: number;
   value?: Value;
@@ -22,7 +28,7 @@ type TileGroupProps = {
 };
 
 export default function TileGroup({
-  className,
+  classNames = {},
   count = 3,
   dateTransform,
   dateType,
@@ -41,12 +47,13 @@ export default function TileGroup({
 
     tiles.push(
       renderTile({
-        classes: getTileClasses({
+        className: getTileClassName({
           date,
           dateType,
           hover,
           value,
           valueType,
+          tileClassNames: classNames.tile,
         }),
         date,
       }),
@@ -54,7 +61,7 @@ export default function TileGroup({
   }
 
   return (
-    <Flex className={className} count={count} offset={offset} wrap>
+    <Flex className={classNames.tileGroup} count={count} offset={offset} wrap>
       {tiles}
     </Flex>
   );
diff --git a/packages/react-calendar/src/YearView.spec.tsx b/packages/react-calendar/src/YearView.spec.tsx
index 0e658a18..bb825a9c 100644
--- a/packages/react-calendar/src/YearView.spec.tsx
+++ b/packages/react-calendar/src/YearView.spec.tsx
@@ -40,7 +40,7 @@ describe('YearView', () => {
         return 'firstDayOfTheMonth';
       }
 
-      return null;
+      return;
     };
 
     const { container } = render(
diff --git a/packages/react-calendar/src/YearView.tsx b/packages/react-calendar/src/YearView.tsx
index 4e7c388f..d0fa5c50 100644
--- a/packages/react-calendar/src/YearView.tsx
+++ b/packages/react-calendar/src/YearView.tsx
@@ -1,20 +1,33 @@
 import React from 'react';
+import clsx from 'clsx';
 
-import Months from './YearView/Months.js';
+import Months, { slotNames as monthsSlotNames } from './YearView/Months.js';
 
 import { tileGroupProps } from './shared/propTypes.js';
+import type { ClassName } from './shared/types.js';
+import { pickClassNames } from './shared/utils.js';
 
-type YearViewProps = React.ComponentProps<typeof Months>;
+const localSlotName = ['yearView'] as const;
+type LocalSlotName = (typeof localSlotName)[number];
+export const slotNames = [...localSlotName, ...monthsSlotNames] as const;
+
+type MonthsProps = React.ComponentProps<typeof Months>;
+
+type YearViewProps = Omit<MonthsProps, 'classNames'> & {
+  classNames?: MonthsProps['classNames'] & Partial<Record<LocalSlotName, ClassName>>;
+};
 
 /**
  * Displays a given year.
  */
-const YearView: React.FC<YearViewProps> = function YearView(props) {
+const YearView: React.FC<YearViewProps> = function YearView({ classNames = {}, ...props }) {
   function renderMonths() {
-    return <Months {...props} />;
+    return <Months {...props} classNames={pickClassNames(classNames, monthsSlotNames)} />;
   }
 
-  return <div className="react-calendar__year-view">{renderMonths()}</div>;
+  return (
+    <div className={clsx('react-calendar__year-view', classNames.yearView)}>{renderMonths()}</div>
+  );
 };
 
 YearView.propTypes = {
diff --git a/packages/react-calendar/src/YearView/Month.spec.tsx b/packages/react-calendar/src/YearView/Month.spec.tsx
index 3444d026..ef06a166 100644
--- a/packages/react-calendar/src/YearView/Month.spec.tsx
+++ b/packages/react-calendar/src/YearView/Month.spec.tsx
@@ -6,16 +6,20 @@ import Month from './Month.js';
 
 const tileProps = {
   activeStartDate: new Date(2018, 0, 1),
-  classes: ['react-calendar__tile'],
+  classNames: {
+    monthTile: 'react-calendar__tile',
+  },
   date: new Date(2018, 0, 1),
-};
+} satisfies React.ComponentProps<typeof Month>;
 
 describe('Month', () => {
   it('applies given classNames properly', () => {
     const { container } = render(
       <Month
         {...tileProps}
-        classes={['react-calendar__tile', 'react-calendar__tile--flag']}
+        classNames={{
+          monthTile: ['react-calendar__tile', 'react-calendar__tile--flag'],
+        }}
         tileClassName={() => 'testFunctionClassName'}
       />,
     );
diff --git a/packages/react-calendar/src/YearView/Month.tsx b/packages/react-calendar/src/YearView/Month.tsx
index f77434a2..5cfdc427 100644
--- a/packages/react-calendar/src/YearView/Month.tsx
+++ b/packages/react-calendar/src/YearView/Month.tsx
@@ -7,11 +7,15 @@ import {
   formatMonth as defaultFormatMonth,
   formatMonthYear as defaultFormatMonthYear,
 } from '../shared/dateFormatter.js';
+import type { ClassName } from '../shared/types.js';
 
 const className = 'react-calendar__year-view__months__month';
 
+export const slotNames = ['monthTile'] as const;
+type SlotName = (typeof slotNames)[number];
+
 type MonthProps = {
-  classes?: string[];
+  classNames?: Partial<Record<SlotName, ClassName>>;
   /**
    * Function called to override default formatting of month names. Can be used to use your own formatting function.
    *
@@ -26,11 +30,11 @@ type MonthProps = {
   formatMonthYear?: typeof defaultFormatMonthYear;
 } & Omit<
   React.ComponentProps<typeof Tile>,
-  'children' | 'formatAbbr' | 'maxDateTransform' | 'minDateTransform' | 'view'
+  'children' | 'formatAbbr' | 'maxDateTransform' | 'minDateTransform' | 'view' | 'className'
 >;
 
 export default function Month({
-  classes = [],
+  classNames = {},
   formatMonth = defaultFormatMonth,
   formatMonthYear = defaultFormatMonthYear,
   ...otherProps
@@ -40,7 +44,7 @@ export default function Month({
   return (
     <Tile
       {...otherProps}
-      classes={[...classes, className]}
+      className={[className, classNames.monthTile]}
       formatAbbr={formatMonthYear}
       maxDateTransform={getMonthEnd}
       minDateTransform={getMonthStart}
diff --git a/packages/react-calendar/src/YearView/Months.tsx b/packages/react-calendar/src/YearView/Months.tsx
index bb7b162b..67752789 100644
--- a/packages/react-calendar/src/YearView/Months.tsx
+++ b/packages/react-calendar/src/YearView/Months.tsx
@@ -1,10 +1,23 @@
 import React from 'react';
 import { getMonthStart, getYear } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup.js';
-import Month from './Month.js';
+import TileGroup, { slotNames as tileGroupSlotNames } from '../TileGroup.js';
+import Month, { slotNames as monthSlotNames } from './Month.js';
+import type { ClassName } from '../shared/types.js';
+import { pickClassNames } from '../shared/utils.js';
+
+type TileGroupProps = React.ComponentProps<typeof TileGroup>;
+type MonthProps = React.ComponentProps<typeof Month>;
+
+const localSlotName = ['monthsView'] as const;
+type LocalSlotName = (typeof localSlotName)[number];
+export const slotNames = [...localSlotName, ...tileGroupSlotNames, ...monthSlotNames] as const;
 
 type MonthsProps = {
+  classNames?: TileGroupProps['classNames'] &
+    MonthProps['classNames'] &
+    Partial<Record<LocalSlotName, ClassName>>;
+  /**
   /**
    * The beginning of a period that shall be displayed.
    *
@@ -12,20 +25,30 @@ type MonthsProps = {
    */
   activeStartDate: Date;
 } & Omit<
-  React.ComponentProps<typeof TileGroup>,
-  'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start'
+  TileGroupProps,
+  'dateTransform' | 'dateType' | 'end' | 'renderTile' | 'start' | 'classNames'
 > &
-  Omit<React.ComponentProps<typeof Month>, 'classes' | 'date'>;
+  Omit<MonthProps, 'date' | 'classNames'>;
 
 export default function Months(props: MonthsProps) {
-  const { activeStartDate, hover, value, valueType, ...otherProps } = props;
+  const { activeStartDate, hover, value, valueType, classNames = {}, ...otherProps } = props;
   const start = 0;
   const end = 11;
   const year = getYear(activeStartDate);
 
   return (
     <TileGroup
-      className="react-calendar__year-view__months"
+      classNames={pickClassNames(
+        {
+          ...classNames,
+          tileGroup: [
+            'react-calendar__year-view__months',
+            classNames.tileGroup,
+            classNames.monthsView,
+          ],
+        },
+        tileGroupSlotNames,
+      )}
       dateTransform={(monthIndex) => {
         const date = new Date();
         date.setFullYear(year, monthIndex, 1);
@@ -34,11 +57,14 @@ export default function Months(props: MonthsProps) {
       dateType="month"
       end={end}
       hover={hover}
-      renderTile={({ date, ...otherTileProps }) => (
+      renderTile={({ date, className }) => (
         <Month
           key={date.getTime()}
           {...otherProps}
-          {...otherTileProps}
+          classNames={pickClassNames(
+            { ...classNames, monthTile: [classNames.monthTile, className] },
+            monthSlotNames,
+          )}
           activeStartDate={activeStartDate}
           date={date}
         />
diff --git a/packages/react-calendar/src/shared/propTypes.ts b/packages/react-calendar/src/shared/propTypes.ts
index 87a15a85..48bfcefc 100644
--- a/packages/react-calendar/src/shared/propTypes.ts
+++ b/packages/react-calendar/src/shared/propTypes.ts
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const.js';
 
 import type { Requireable, Validator } from 'prop-types';
-import type { Range, View } from './types.js';
+import type { ClassName, Range, View } from './types.js';
 
 const calendarTypes = Object.values(CALENDAR_TYPES);
 const deprecatedCalendarTypes = Object.values(DEPRECATED_CALENDAR_TYPES);
@@ -14,10 +14,18 @@ export const isCalendarType = PropTypes.oneOf([
   ...deprecatedCalendarTypes,
 ] as const);
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const lazyFunction =
+  <F extends (...args: any[]) => any = (...args: any[]) => any>(f: F) =>
+  (...args: Parameters<F>) =>
+    f(...args);
+/* eslint-enable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line @typescript-eslint/no-use-before-define
+const lazyClassName = lazyFunction<Validator<ClassName>>((...args) => isClassName(...args));
 export const isClassName = PropTypes.oneOfType([
   PropTypes.string,
-  PropTypes.arrayOf(PropTypes.string),
-]);
+  lazyClassName,
+]) as Validator<ClassName>;
 
 export const isMinDate: Validator<Date | null | undefined> = function isMinDate(
   props,
@@ -145,6 +153,7 @@ export const tileGroupProps = {
   valueType: PropTypes.oneOf(['century', 'decade', 'year', 'month', 'day'] as const).isRequired,
 };
 
+// TODO: remove, unused
 export const tileProps = {
   activeStartDate: PropTypes.instanceOf(Date).isRequired,
   classes: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
diff --git a/packages/react-calendar/src/shared/types.ts b/packages/react-calendar/src/shared/types.ts
index 4d5fb24d..20769764 100644
--- a/packages/react-calendar/src/shared/types.ts
+++ b/packages/react-calendar/src/shared/types.ts
@@ -6,7 +6,7 @@ export type Action = 'prev' | 'prev2' | 'next' | 'next2' | 'onChange' | 'drillUp
 
 export type CalendarType = (typeof CALENDAR_TYPES)[keyof typeof CALENDAR_TYPES];
 
-export type ClassName = string | null | undefined | (string | null | undefined)[];
+export type ClassName = undefined | string | ClassName[];
 
 export type DeprecatedCalendarType =
   (typeof DEPRECATED_CALENDAR_TYPES)[keyof typeof DEPRECATED_CALENDAR_TYPES];
diff --git a/packages/react-calendar/src/shared/utils.spec.ts b/packages/react-calendar/src/shared/utils.spec.ts
index 0b1f3e79..46181288 100644
--- a/packages/react-calendar/src/shared/utils.spec.ts
+++ b/packages/react-calendar/src/shared/utils.spec.ts
@@ -4,7 +4,7 @@ import {
   isValueWithinRange,
   isRangeWithinRange,
   doRangesOverlap,
-  getTileClasses,
+  getTileClassName,
 } from './utils.js';
 
 import type { Range } from './types.js';
@@ -168,16 +168,16 @@ describe('doRangesOverlap', () => {
 describe('getTileClasses', () => {
   it('throws an error when given no value', () => {
     // @ts-expect-error-next-line
-    expect(() => getTileClasses()).toThrow();
+    expect(() => getTileClassName()).toThrow();
   });
 
   it('throws an error when given date but not given dateType parameter ', () => {
-    expect(() => getTileClasses({ date: new Date(2017, 0, 1) })).toThrow();
+    expect(() => getTileClassName({ date: new Date(2017, 0, 1) })).toThrow();
   });
 
   it('throws an error when given date and value but not given valueType parameter ', () => {
     expect(() =>
-      getTileClasses({
+      getTileClassName({
         date: new Date(2017, 0, 1),
         dateType: 'month',
         value: new Date(2017, 0, 1),
@@ -186,7 +186,7 @@ describe('getTileClasses', () => {
   });
 
   it('returns active flag set to true when passed a value equal to date', () => {
-    const result = getTileClasses({
+    const result = getTileClassName({
       value: new Date(2017, 0, 1),
       valueType: 'month',
       date: new Date(2017, 0, 1),
@@ -199,7 +199,7 @@ describe('getTileClasses', () => {
   });
 
   it('returns active flag set to true when passed a value array equal to date array', () => {
-    const result = getTileClasses({
+    const result = getTileClassName({
       value: [new Date(2017, 0, 1), new Date(2017, 0, 31)],
       date: [new Date(2017, 0, 1), new Date(2017, 0, 31)],
     });
@@ -210,7 +210,7 @@ describe('getTileClasses', () => {
   });
 
   it('returns hasActive flag set to true when passed a value covering date', () => {
-    const result = getTileClasses({
+    const result = getTileClassName({
       value: new Date(2017, 6, 1),
       valueType: 'month',
       date: new Date(2017, 0, 1),
@@ -223,7 +223,7 @@ describe('getTileClasses', () => {
   });
 
   it('returns all flags set to false when given value completely unrelated to date', () => {
-    const result = getTileClasses({
+    const result = getTileClassName({
       value: new Date(2017, 6, 1),
       valueType: 'month',
       date: new Date(2016, 0, 1),
@@ -238,7 +238,7 @@ describe('getTileClasses', () => {
     it('returns range flag set to true when passed a date within value array', () => {
       const value: Range<Date> = [new Date(2017, 0, 1), new Date(2017, 6, 1)];
 
-      const result = getTileClasses({
+      const result = getTileClassName({
         value,
         date: new Date(2017, 3, 1),
         dateType: 'month',
@@ -252,7 +252,7 @@ describe('getTileClasses', () => {
     it('returns range & rangeStart flags set to true when passed a date equal to value start', () => {
       const value: Range<Date> = [new Date(2017, 0, 1), new Date(2017, 6, 1)];
 
-      const result = getTileClasses({
+      const result = getTileClassName({
         value,
         date: new Date(2017, 0, 1),
         dateType: 'month',
@@ -266,7 +266,7 @@ describe('getTileClasses', () => {
     it('returns range & rangeEnd flags set to true when passed a date equal to value end', () => {
       const value: Range<Date> = [new Date(2017, 0, 1), new Date(2017, 6, 1)];
 
-      const result = getTileClasses({
+      const result = getTileClassName({
         value,
         date: new Date(2017, 6, 1),
         dateType: 'month',
@@ -280,7 +280,7 @@ describe('getTileClasses', () => {
 
   describe('hover classes', () => {
     it('returns hover flag set to true when passed a date between value and hover (1)', () => {
-      const result = getTileClasses({
+      const result = getTileClassName({
         value: new Date(2017, 6, 1),
         valueType: 'month',
         date: new Date(2017, 3, 1),
@@ -294,7 +294,7 @@ describe('getTileClasses', () => {
     });
 
     it('returns hover flag set to true when passed a date between value and hover (2)', () => {
-      const result = getTileClasses({
+      const result = getTileClassName({
         value: new Date(2017, 0, 1),
         valueType: 'month',
         date: new Date(2017, 3, 1),
@@ -308,7 +308,7 @@ describe('getTileClasses', () => {
     });
 
     it('returns hover & hoverStart flags set to true when passed a date equal to hover', () => {
-      const result = getTileClasses({
+      const result = getTileClassName({
         value: new Date(2017, 0, 1),
         valueType: 'month',
         date: new Date(2017, 0, 1),
@@ -322,7 +322,7 @@ describe('getTileClasses', () => {
     });
 
     it('returns hover & hoverEnd flags set to true when passed a date equal to hover', () => {
-      const result = getTileClasses({
+      const result = getTileClassName({
         value: new Date(2017, 0, 1),
         valueType: 'month',
         date: new Date(2017, 6, 1),
diff --git a/packages/react-calendar/src/shared/utils.ts b/packages/react-calendar/src/shared/utils.ts
index 77862b6a..d855bc64 100644
--- a/packages/react-calendar/src/shared/utils.ts
+++ b/packages/react-calendar/src/shared/utils.ts
@@ -3,7 +3,14 @@ import warning from 'warning';
 import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const.js';
 import { getRange } from './dates.js';
 
-import type { CalendarType, DeprecatedCalendarType, Range, RangeType, Value } from './types.js';
+import type {
+  CalendarType,
+  ClassName,
+  DeprecatedCalendarType,
+  Range,
+  RangeType,
+  Value,
+} from './types.js';
 
 /**
  * Returns a value no smaller than min and no larger than max.
@@ -37,35 +44,39 @@ export function doRangesOverlap(range1: Range<Date>, range2: Range<Date>): boole
   return isValueWithinRange(range1[0], range2) || isValueWithinRange(range1[1], range2);
 }
 
+const rangeSlotNames = ['base', 'start', 'end', 'bothEnds'] as const;
+type RangeSlotName = (typeof rangeSlotNames)[number];
+export type RangeClassNames = Partial<Record<RangeSlotName, ClassName>>;
 function getRangeClassNames(
   valueRange: Range<Date>,
   dateRange: Range<Date>,
   baseClassName: string,
-): string[] {
+  rangeClassNames: RangeClassNames = {},
+): ClassName[] {
   const isRange = doRangesOverlap(dateRange, valueRange);
 
-  const classes = [];
+  const classNames: ClassName[] = [];
 
   if (isRange) {
-    classes.push(baseClassName);
+    classNames.push(baseClassName, rangeClassNames.base);
 
     const isRangeStart = isValueWithinRange(valueRange[0], dateRange);
     const isRangeEnd = isValueWithinRange(valueRange[1], dateRange);
 
     if (isRangeStart) {
-      classes.push(`${baseClassName}Start`);
+      classNames.push(`${baseClassName}Start`, rangeClassNames.start);
     }
 
     if (isRangeEnd) {
-      classes.push(`${baseClassName}End`);
+      classNames.push(`${baseClassName}End`, rangeClassNames.end);
     }
 
     if (isRangeStart && isRangeEnd) {
-      classes.push(`${baseClassName}BothEnds`);
+      classNames.push(`${baseClassName}BothEnds`, rangeClassNames.bothEnds);
     }
   }
 
-  return classes;
+  return classNames;
 }
 
 function isCompleteValue<T>(value: T | null | Range<T | null>): value is T | Range<T> {
@@ -76,24 +87,31 @@ function isCompleteValue<T>(value: T | null | Range<T | null>): value is T | Ran
   return value !== null;
 }
 
-export function getTileClasses(args: {
+const tileSlotNames = ['base', 'now', 'active', 'hasActive'] as const;
+type TileSlotName = (typeof tileSlotNames)[number];
+export type TileClassNames = Partial<Record<TileSlotName, ClassName>> & {
+  range?: RangeClassNames;
+  hoverRange?: RangeClassNames;
+};
+export function getTileClassName(args: {
   date?: Date | Range<Date>;
   dateType?: RangeType;
   hover?: Date | null;
   value?: Value;
   valueType?: RangeType;
-}): string[] {
+  tileClassNames?: TileClassNames;
+}): ClassName[] {
   if (!args) {
     throw new Error('args is required');
   }
 
-  const { value, date, hover } = args;
+  const { value, date, hover, tileClassNames = {} } = args;
 
   const className = 'react-calendar__tile';
-  const classes = [className];
+  const classNames: ClassName[] = [className, tileClassNames.base];
 
   if (!date) {
-    return classes;
+    return classNames;
   }
 
   const now = new Date();
@@ -112,11 +130,11 @@ export function getTileClasses(args: {
   })();
 
   if (isValueWithinRange(now, dateRange)) {
-    classes.push(`${className}--now`);
+    classNames.push(`${className}--now`, tileClassNames.now);
   }
 
   if (!value || !isCompleteValue(value)) {
-    return classes;
+    return classNames;
   }
 
   const valueRange = (() => {
@@ -134,26 +152,36 @@ export function getTileClasses(args: {
   })();
 
   if (isRangeWithinRange(valueRange, dateRange)) {
-    classes.push(`${className}--active`);
+    classNames.push(`${className}--active`, tileClassNames.active);
   } else if (doRangesOverlap(valueRange, dateRange)) {
-    classes.push(`${className}--hasActive`);
+    classNames.push(`${className}--hasActive`, tileClassNames.hasActive);
   }
 
-  const valueRangeClassNames = getRangeClassNames(valueRange, dateRange, `${className}--range`);
+  const valueRangeClassNames = getRangeClassNames(
+    valueRange,
+    dateRange,
+    `${className}--range`,
+    tileClassNames.range,
+  );
 
-  classes.push(...valueRangeClassNames);
+  classNames.push(...valueRangeClassNames);
 
   const valueArray = Array.isArray(value) ? value : [value];
 
   if (hover && valueArray.length === 1) {
     const hoverRange: Range<Date> =
       hover > valueRange[0] ? [valueRange[0], hover] : [hover, valueRange[0]];
-    const hoverRangeClassNames = getRangeClassNames(hoverRange, dateRange, `${className}--hover`);
+    const hoverRangeClassNames = getRangeClassNames(
+      hoverRange,
+      dateRange,
+      `${className}--hover`,
+      tileClassNames.hoverRange,
+    );
 
-    classes.push(...hoverRangeClassNames);
+    classNames.push(...hoverRangeClassNames);
   }
 
-  return classes;
+  return classNames;
 }
 
 const calendarTypeMap: Record<DeprecatedCalendarType, CalendarType> = {
@@ -189,3 +217,46 @@ export function mapCalendarType(
 
   return calendarTypeOrDeprecatedCalendarType;
 }
+
+export function pickClassNames<
+  T extends Partial<Record<string, unknown>>,
+  K extends keyof T & string,
+>(obj: T | undefined, keys: readonly K[]): Pick<T, K> {
+  if (!obj) {
+    return {} as Pick<T, K>;
+  }
+  const pickedClassNames = {} as Pick<T, K>;
+  for (const key of keys) {
+    pickedClassNames[key] = obj[key];
+  }
+  return pickedClassNames;
+}
+
+export function mergeRangeClassNames(
+  ...rangeClassNames: (RangeClassNames | undefined)[]
+): RangeClassNames {
+  const mergedRangeClassNames = {} as RangeClassNames;
+  rangeSlotNames.forEach((rangeSlotName) => {
+    mergedRangeClassNames[rangeSlotName] = rangeClassNames.map(
+      (rangeClassNamesElement) => rangeClassNamesElement?.[rangeSlotName],
+    );
+  });
+  return mergedRangeClassNames;
+}
+
+export function mergeTileClassNames(
+  ...tileClassNames: (TileClassNames | undefined)[]
+): TileClassNames {
+  const mergedTileClassNames = {} as TileClassNames;
+  tileSlotNames.forEach((tileSlotName) => {
+    mergedTileClassNames[tileSlotName] = tileClassNames.map(
+      (tileClassNamesElement) => tileClassNamesElement?.[tileSlotName],
+    );
+  });
+  (['range', 'hoverRange'] as const).forEach((rangeSlotName) => {
+    mergedTileClassNames[rangeSlotName] = mergeRangeClassNames(
+      ...tileClassNames.map((tileClassNamesElement) => tileClassNamesElement?.[rangeSlotName]),
+    );
+  });
+  return mergedTileClassNames;
+}