feat: add renderDayProps

coingaming · Dec 30, 2020 · 773218e · 773218e
1 parent 3cd4dfc
commit 773218e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/calendar/src/Month.tsx b/packages/calendar/src/Month.tsx
@@ -18,13 +18,15 @@ type Props = {
     locale?: Locale;
   };
   cursorDate: Date;
+  renderDayProps?: (date: Date) => object;
   renderDayContent?: (date: Date) => React.ReactNode;
   renderNearDayNumber?: (date: Date) => React.ReactNode;
 };
 
 const Month: React.FC<Props> = ({
   config = {},
   cursorDate,
+  renderDayProps = () => {},
   renderDayContent = () => null,
   renderNearDayNumber = () => null,
 }) => {
@@ -38,7 +40,7 @@ const Month: React.FC<Props> = ({
       <WeekDayLabels config={conf} />
       {getMonthDays({ date: cursorDate, weekStartsOn: conf.weekStartsOn }).map(
         date => (
-          <Day key={date.toString()}>
+          <Day key={date.toString()} {...renderDayProps(date)}>
             <DayInner>
               <DayNumber>
                 <Text size={20} color={getDayNumberColor(cursorDate, date)}>

diff --git a/packages/calendar/src/README.mdx b/packages/calendar/src/README.mdx
@@ -1,6 +1,6 @@
 ---
 name: Calendar
-menu: Components
+menu: Calendar
 route: /Calendar/calendar
 ---
 
@@ -12,6 +12,7 @@ Week and Month calendar components have the same api
 | :------------------ | :------------------------------------: | :-------------------------------------------------------------------------------- |
 | cursorDate          |                  Date                  | **Required**. Will display month of cursorDate                                    |
 | config              | {weekStartsOn: number, locale: Locale} | **weekStartsOn** - first day of week(sunday=0), **locale** - Locale from date fns |
+| renderDayProps      |         (date:Date) => object          | you can provide custom props to each day                                          |
 | renderDayContent    |       (date:Date) => JSX.Element       | you can render something on the left to the day number                            |
 | renderNearDayNumber |       (date:Date) => JSX.Element       | you can render something under day number                                         |
 

diff --git a/packages/calendar/src/Week.tsx b/packages/calendar/src/Week.tsx
@@ -17,13 +17,15 @@ type Props = {
     locale?: Locale;
   };
   cursorDate: Date;
+  renderDayProps?: (date: Date) => object;
   renderDayContent?: (date: Date) => React.ReactNode;
   renderNearDayNumber?: (date: Date) => React.ReactNode;
 };
 
 const Week: React.FC<Props> = ({
   config = {},
   cursorDate,
+  renderDayProps = () => {},
   renderDayContent = () => null,
   renderNearDayNumber = () => null,
 }) => {
@@ -37,7 +39,7 @@ const Week: React.FC<Props> = ({
       <WeekDayLabels config={conf} />
       {getWeekDays({ cursorDate, weekStartsOn: conf.weekStartsOn }).map(
         date => (
-          <WeekDay key={date.toString()}>
+          <WeekDay key={date.toString()} {...renderDayProps(date)}>
             <DayNumber>
               <Text size={20} color={getDayNumberColor(cursorDate, date)}>
                 {getDayNumberLabel(cursorDate, date)}