diff --git a/src/components/DisplayMonths.tsx b/src/components/DisplayMonths.tsx
index f18dbed..11993c0 100644
--- a/src/components/DisplayMonths.tsx
+++ b/src/components/DisplayMonths.tsx
@@ -37,7 +37,7 @@ export const DisplayMonths = ({
);
});
};
- return {renderMonths()};
+ return {renderMonths()};
};
type StyleProps = {
diff --git a/src/components/DisplayYears.tsx b/src/components/DisplayYears.tsx
index a06d24f..dd911a4 100644
--- a/src/components/DisplayYears.tsx
+++ b/src/components/DisplayYears.tsx
@@ -27,7 +27,7 @@ export const DisplayYears = ({ setDisplayYears, setSource }: Props) => {
);
}
- return {years} ;
+ return {years} ;
};
const Wrapper = styled.div`
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 50e50ad..dc80c74 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -96,6 +96,7 @@ export const Header = ({
return (
= ({
}
return (
-
+
{titles.map(item => (
{item}
))}
diff --git a/src/constant/types.ts b/src/constant/types.ts
index 5639837..2ac536f 100644
--- a/src/constant/types.ts
+++ b/src/constant/types.ts
@@ -1,5 +1,6 @@
import { DefaultTheme } from "styled-components";
import { ElementType, ReactNode } from "react";
+import { Dayjs } from "dayjs";
type HeaderIconsPosition = {
right: ReactNode;
@@ -35,6 +36,7 @@ export interface InitialProps {
numberOfMonths?: number;
initialMonthAndYear?: string;
onRangeDateInScreen?: DatePickerWindowUpdated;
+ dayClasses?: (day: Dayjs) => string[];
}
type DatePickerWindow = { start: string; end: string };
diff --git a/src/datePicker/DatePicker.tsx b/src/datePicker/DatePicker.tsx
index 9795253..8a7654a 100644
--- a/src/datePicker/DatePicker.tsx
+++ b/src/datePicker/DatePicker.tsx
@@ -27,6 +27,7 @@ export const DatePicker = ({
onChange,
initialMonthAndYear,
onRangeDateInScreen,
+ dayClasses,
}: DatePickerProps) => {
const [selectedDays, setSelectedDays] = useState(selectedDaysProps || []);
const [numberOfMonths, setNumberOfMonths] = useState(numberOfMonthsProps);
@@ -129,6 +130,7 @@ export const DatePicker = ({
disabledBeforeDate={disabledBeforeDate}
disabledBeforeToday={disabledBeforeToday}
numberOfSelectableDays={numberOfSelectableDays}
+ dayClasses={dayClasses}
/>
)}
diff --git a/src/datePicker/Day.tsx b/src/datePicker/Day.tsx
index a4c48b7..99125fd 100644
--- a/src/datePicker/Day.tsx
+++ b/src/datePicker/Day.tsx
@@ -23,6 +23,7 @@ type Props = {
components?: DatePickerComponents;
onChange: DatePickerOnChange;
setSelectedDays: Dispatch>;
+ dayClasses?: (day: Dayjs) => string[];
};
export const Day: React.FC = ({
@@ -40,6 +41,7 @@ export const Day: React.FC = ({
numberOfSelectableDays,
disabledBeforeDate,
disabledAfterDate,
+ dayClasses,
}) => {
if (disabledBeforeToday) {
const today = dayjs().format(FORMAT_DATE);
@@ -134,6 +136,10 @@ export const Day: React.FC = ({
};
const DayComponent = components?.days;
+ let extraDayClasses = "";
+ if (dayClasses) {
+ extraDayClasses = dayClasses(day).join(" ");
+ }
return (
= ({
dayjs()
.calendar(jalali ? "jalali" : "gregory")
.format(FORMAT_DATE) === day.format(FORMAT_DATE),
- })}
+ }, extraDayClasses, "tp-calendar-day")}
>
{DayComponent && (
diff --git a/src/datePicker/Months.tsx b/src/datePicker/Months.tsx
index a155cd2..5253449 100644
--- a/src/datePicker/Months.tsx
+++ b/src/datePicker/Months.tsx
@@ -24,6 +24,7 @@ interface Props {
components?: DatePickerComponents;
setSource: Dispatch>;
setSelectedDays: Dispatch>;
+ dayClasses?: (day: Dayjs) => string[];
}
export const Months = ({
@@ -41,6 +42,7 @@ export const Months = ({
disabled,
onChange,
source: sourceProp,
+ dayClasses,
}: Props) => {
const renderMonths = () => {
let months = [];
@@ -55,6 +57,7 @@ export const Months = ({
);
months.push(
{weeksDays.map(week => (
))}
@@ -99,5 +104,5 @@ export const Months = ({
}
return months;
};
- return {renderMonths()};
+ return {renderMonths()};
};
diff --git a/src/rangePicker/Day.tsx b/src/rangePicker/Day.tsx
index aeb8416..2749218 100644
--- a/src/rangePicker/Day.tsx
+++ b/src/rangePicker/Day.tsx
@@ -33,6 +33,7 @@ interface Props {
setSelectedDays: Dispatch<
SetStateAction
>;
+ dayClasses?: (day: Dayjs) => string[];
}
export const Day = ({
@@ -52,6 +53,7 @@ export const Day = ({
disabledBeforeToday,
disabledBeforeDate,
disabledAfterDate,
+ dayClasses,
}: Props) => {
if (disabledBeforeToday) {
const today = dayjs().format(FORMAT_DATE);
@@ -199,6 +201,10 @@ export const Day = ({
};
const DayComponent = components?.days;
+ let extraDayClasses = "";
+ if (dayClasses) {
+ extraDayClasses = dayClasses(day).join(" ");
+ }
return (
{DayComponent && (
diff --git a/src/rangePicker/Months.tsx b/src/rangePicker/Months.tsx
index 356ff7d..ca4a02e 100644
--- a/src/rangePicker/Months.tsx
+++ b/src/rangePicker/Months.tsx
@@ -33,6 +33,7 @@ interface Props {
setSelectedDays: Dispatch<
SetStateAction
>;
+ dayClasses?: (day: Dayjs) => string[];
}
export const Months = ({
@@ -52,6 +53,7 @@ export const Months = ({
disabled,
onChange,
source: sourceProp,
+ dayClasses,
}: Props) => {
const renderMonths = () => {
let months = [];
@@ -66,6 +68,7 @@ export const Months = ({
);
months.push(
{weeksDays.map(week => (
))}
@@ -113,5 +118,5 @@ export const Months = ({
return months;
};
- return {renderMonths()};
+ return {renderMonths()};
};
diff --git a/src/rangePicker/RangePicker.tsx b/src/rangePicker/RangePicker.tsx
index 22bca72..5b0e8f5 100644
--- a/src/rangePicker/RangePicker.tsx
+++ b/src/rangePicker/RangePicker.tsx
@@ -27,6 +27,7 @@ export const RangePicker = ({
onChange,
initialMonthAndYear,
onRangeDateInScreen,
+ dayClasses,
}: RangePickerProps) => {
const [selectedDays, setSelectedDays] = useState(selectedDaysProps);
const [hoverDay, setHoverDay] = useState();
@@ -130,6 +131,7 @@ export const RangePicker = ({
disabledBeforeDate={disabledBeforeDate}
disabledAfterDate={disabledAfterDate}
allowDisabledDaysSpan={allowDisabledDaysSpan}
+ dayClasses={dayClasses}
/>
)}
diff --git a/src/stories/DatePicker.stories.tsx b/src/stories/DatePicker.stories.tsx
index 7a9ac4a..e1acc9e 100644
--- a/src/stories/DatePicker.stories.tsx
+++ b/src/stories/DatePicker.stories.tsx
@@ -183,6 +183,23 @@ stories.add("Selected Days", () => {
);
});
+stories.add("Custom Day Classes", () => {
+ return (
+ <>
+
+ window.console.log(dates)}
+ dayClasses={day => [parseInt(day.format('D')) % 2 == 1 ? 'odd' : 'even' ]}
+ />
+ >
+ );
+});
+
stories.add("Number of Selectable Days", () => {
return (
{
);
});
+stories.add("Custom Day Classes", () => {
+ return (
+ <>
+
+ window.console.log(dates)}
+ dayClasses={day => [parseInt(day.format('D')) % 2 == 1 ? 'odd' : 'even' ]}
+ />
+ >
+ );
+});
+
stories.add("Custom components - Title of weeks Component", () => {
return (