feat: add ability to add custom classes to each day.

This will allow custom functionality such as differentiating what kind of 'invalid' a day might be. e.g. when used as a booking calendar, you might not be allowed to select a given day to check in because it's sold out, or it may simply not be a valid check-in day. Differentiating this is key to user experience.
samsam-ahmadi · Aug 2, 2022 · 44be8c6 · 44be8c6
1 parent ee53c38
commit 44be8c6
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 2 deletions.
diff --git 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
@@ -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}
           />
         )}
       </ThemeProvider>

diff --git a/src/datePicker/Day.tsx b/src/datePicker/Day.tsx
@@ -23,6 +23,7 @@ type Props = {
   components?: DatePickerComponents;
   onChange: DatePickerOnChange;
   setSelectedDays: Dispatch<SetStateAction<string[]>>;
+  dayClasses?: (day: Dayjs) => string[];
 };
 
 export const Day: React.FC<Props> = ({
@@ -40,6 +41,7 @@ export const Day: React.FC<Props> = ({
   numberOfSelectableDays,
   disabledBeforeDate,
   disabledAfterDate,
+  dayClasses,
 }) => {
   if (disabledBeforeToday) {
     const today = dayjs().format(FORMAT_DATE);
@@ -134,6 +136,10 @@ export const Day: React.FC<Props> = ({
   };
 
   const DayComponent = components?.days;
+  let extraDayClasses = "";
+  if (dayClasses) {
+    extraDayClasses = dayClasses(day).join(" ");
+  }
   return (
     <Wrapper
       data-test={day.format(FORMAT_DATE)}
@@ -147,7 +153,7 @@ export const Day: React.FC<Props> = ({
           dayjs()
             .calendar(jalali ? "jalali" : "gregory")
             .format(FORMAT_DATE) === day.format(FORMAT_DATE),
-      })}
+      }, extraDayClasses)}
     >
       {DayComponent && (
         <DayComponent day={day.format(FORMAT_DATE)} jalali={jalali} />

diff --git a/src/datePicker/Months.tsx b/src/datePicker/Months.tsx
@@ -24,6 +24,7 @@ interface Props {
   components?: DatePickerComponents;
   setSource: Dispatch<SetStateAction<Dayjs>>;
   setSelectedDays: Dispatch<SetStateAction<string[]>>;
+  dayClasses?: (day: Dayjs) => string[];
 }
 
 export const Months = ({
@@ -41,6 +42,7 @@ export const Months = ({
   disabled,
   onChange,
   source: sourceProp,
+  dayClasses,
 }: Props) => {
   const renderMonths = () => {
     let months = [];
@@ -90,6 +92,7 @@ export const Months = ({
                   disabledBeforeDate={disabledBeforeDate}
                   disabledAfterDate={disabledAfterDate}
                   numberOfSelectableDays={numberOfSelectableDays}
+                  dayClasses={dayClasses}
                 />
               ))}
             </Weeks>

diff --git a/src/rangePicker/Day.tsx b/src/rangePicker/Day.tsx
@@ -33,6 +33,7 @@ interface Props {
   setSelectedDays: Dispatch<
     SetStateAction<RangePickerSelectedDays | undefined>
   >;
+  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 (
     <Wrapper
       data-test={day.format(FORMAT_DATE)}
@@ -228,7 +234,7 @@ export const Day = ({
           dayjs()
             .calendar(jalali ? "jalali" : "gregory")
             .format(FORMAT_DATE) === day.format(FORMAT_DATE),
-      })}
+      }, extraDayClasses)}
     >
       {DayComponent && (
         <DayComponent day={day.format(FORMAT_DATE)} jalali={jalali} />

diff --git a/src/rangePicker/Months.tsx b/src/rangePicker/Months.tsx
@@ -33,6 +33,7 @@ interface Props {
   setSelectedDays: Dispatch<
     SetStateAction<RangePickerSelectedDays | undefined>
   >;
+  dayClasses?: (day: Dayjs) => string[];
 }
 
 export const Months = ({
@@ -52,6 +53,7 @@ export const Months = ({
   disabled,
   onChange,
   source: sourceProp,
+  dayClasses,
 }: Props) => {
   const renderMonths = () => {
     let months = [];
@@ -103,6 +105,7 @@ export const Months = ({
                   allowDisabledDaysSpan={allowDisabledDaysSpan}
                   disabledBeforeDate={disabledBeforeDate}
                   disabledAfterDate={disabledAfterDate}
+                  dayClasses={dayClasses}
                 />
               ))}
             </Weeks>

diff --git 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<string>();
@@ -130,6 +131,7 @@ export const RangePicker = ({
             disabledBeforeDate={disabledBeforeDate}
             disabledAfterDate={disabledAfterDate}
             allowDisabledDaysSpan={allowDisabledDaysSpan}
+            dayClasses={dayClasses}
           />
         )}
       </ThemeProvider>

diff --git 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 (
+    <>
+      <style type="text/css">{`
+        .odd { transform: rotate(-10deg); } .even { transform: rotate(10deg); }
+      `}</style>
+      <DatePicker
+        numberOfMonths={1}
+        autoResponsive={false}
+        initialMonthAndYear="2021-08"
+        onChange={dates => window.console.log(dates)}
+        dayClasses={day => [parseInt(day.format('D')) % 2 == 1 ? 'odd' : 'even' ]}
+      />
+    </>
+  );
+});
+
 stories.add("Number of Selectable Days", () => {
   return (
     <DatePicker

diff --git a/src/stories/RangePicker.stories.tsx b/src/stories/RangePicker.stories.tsx
@@ -215,6 +215,23 @@ stories.add("Allow Disabled Days Span", () => {
   );
 });
 
+stories.add("Custom Day Classes", () => {
+  return (
+    <>
+      <style type="text/css">{`
+        .odd { transform: rotate(-10deg); } .even { transform: rotate(10deg); }
+      `}</style>
+      <RangePicker
+        numberOfMonths={1}
+        autoResponsive={false}
+        initialMonthAndYear="2021-08"
+        onChange={dates => window.console.log(dates)}
+        dayClasses={day => [parseInt(day.format('D')) % 2 == 1 ? 'odd' : 'even' ]}
+      />
+    </>
+  );
+});
+
 stories.add("Custom components - Title of weeks Component", () => {
   return (
     <RangePicker