Addded class props for active and now tiles

packages/react-calendar/src/Calendar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import clsx from 'clsx';
 
 import Navigation from './Calendar/Navigation.js';
@@ -392,6 +392,8 @@ export type CalendarProps = {
    * @example ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
    */
   tileClassName?: TileClassNameFunc | ClassName;
+  activeTileClassName?:string
+  nowTileClassName?:string
   /**
    * Allows to render custom content within a given calendar item (day on month view, month on year view and so on).
    *
@@ -653,6 +655,8 @@ const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttribu
       showWeekNumbers,
       tileClassName,
       tileContent,
+      activeTileClassName,
+      nowTileClassName,
       tileDisabled,
       value: valueProps,
       view: viewProps,
@@ -1020,6 +1024,8 @@ const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttribu
         onClick,
         onMouseOver: selectRange ? onMouseOver : undefined,
         tileClassName,
+        activeClassName:activeTileClassName,
+        nowClassName:nowTileClassName,
         tileContent,
         tileDisabled,
         value,

packages/react-calendar/src/MonthView/Days.tsx

@@ -49,6 +49,8 @@ export default function Days(props: DaysProps): React.ReactElement {
     showNeighboringMonth,
     value,
     valueType,
+    activeClassName,
+    nowClassName,
     ...otherProps
   } = props;
 
@@ -103,6 +105,8 @@ export default function Days(props: DaysProps): React.ReactElement {
       dateType="day"
       hover={hover}
       end={end}
+      activeClassName={activeClassName}
+      nowClassName={nowClassName}
       renderTile={({ date, ...otherTileProps }) => (
         <Day
           key={date.getTime()}

packages/react-calendar/src/Tile.tsx

@@ -53,6 +53,8 @@ type TileProps = {
    * @example ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
    */
   tileClassName?: TileClassNameFunc | ClassName;
+  activeClassName?:string;
+  nowClassName?:string;
   /**
    * Allows to render custom content within a given calendar item (day on month view, month on year view and so on).
    *

packages/react-calendar/src/TileGroup.tsx

@@ -3,9 +3,12 @@ import Flex from './Flex.js';
 import { getTileClasses } from './shared/utils.js';
 
 import type { RangeType, Value } from './shared/types.js';
+import { useEffect } from 'react';
 
 type TileGroupProps = {
   className?: string;
+  activeClassName?:string
+  nowClassName?:string
   count?: number;
   dateTransform: (point: number) => Date;
   dateType: RangeType;
@@ -25,6 +28,8 @@ export default function TileGroup({
   dateTransform,
   dateType,
   end,
+  activeClassName,
+  nowClassName,
   hover,
   offset,
   renderTile,
@@ -36,7 +41,7 @@ export default function TileGroup({
   const tiles = [];
   for (let point = start; point <= end; point += step) {
     const date = dateTransform(point);
-
+    console.log(nowClassName,activeClassName)
     tiles.push(
       renderTile({
         classes: getTileClasses({
@@ -45,6 +50,8 @@ export default function TileGroup({
           hover,
           value,
           valueType,
+          activeClassName,
+          nowClassName,
         }),
         date,
       }),

packages/react-calendar/src/shared/utils.ts

@@ -78,6 +78,8 @@ export function getTileClasses(args: {
   dateType?: RangeType;
   hover?: Date | null;
   value?: Value;
+  activeClassName?:string;
+  nowClassName?:string;
   valueType?: RangeType;
 }): string[] {
   if (!args) {
@@ -110,6 +112,7 @@ export function getTileClasses(args: {
 
   if (isValueWithinRange(now, dateRange)) {
     classes.push(`${className}--now`);
+    if(args.nowClassName) classes.push(args.nowClassName)
   }
 
   if (!value || !isCompleteValue(value)) {
@@ -132,10 +135,14 @@ export function getTileClasses(args: {
 
   if (isRangeWithinRange(valueRange, dateRange)) {
     classes.push(`${className}--active`);
+    if(args.activeClassName) classes.push(args.activeClassName)
   } else if (doRangesOverlap(valueRange, dateRange)) {
     classes.push(`${className}--hasActive`);
+    if(args.activeClassName) classes.push(args.activeClassName)
   }
 
+  console.log(classes)
+
   const valueRangeClassNames = getRangeClassNames(valueRange, dateRange, `${className}--range`);
 
   classes.push(...valueRangeClassNames);