feat(calendar): add custom cell content to Calendar

.changeset/popular-seals-appear.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/calendar": minor
+---
+
+Added the `renderCellContent` prop to the `Calendar` and `RangeCalendar` components, allowing developers to specify custom content for each calendar cell. Updated the existing tests and added new test cases to cover the custom cell content functionality.

apps/docs/content/components/calendar/custom-cell-content.ts

@@ -0,0 +1,46 @@
+const App = `import {Calendar, CalendarCellContent, CalendarCellButton, CalendarCellBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Calendar>
+      <CalendarCellContent>
+        <CalendarCellButton />
+        <CalendarCellBody>
+          <div className="flex flex-col w-full gap-0.5 justify-center items-center p-0.5">
+            <span className="bg-red-600 h-1 w-full rounded-full" />
+            <span className="bg-green-600 h-1 w-full rounded-full" />
+            <span className="bg-yellow-600 h-1 w-full rounded-full" />
+          </div>
+        </CalendarCellBody>
+      </CalendarCellContent>
+    </Calendar>
+  );
+}`;
+
+const AppTs = `import {Calendar, CalendarCellContent, CalendarCellHeader, CalendarCellBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Calendar>
+      <CalendarCellContent>
+        <CalendarCellHeader />
+        <CalendarCellBody>
+          <div className="flex flex-col w-full gap-0.5 justify-center items-center p-0.5">
+            <span className="bg-red-600 h-1 w-full rounded-full" />
+            <span className="bg-green-600 h-1 w-full rounded-full" />
+            <span className="bg-yellow-600 h-1 w-full rounded-full" />
+          </div>
+        </CalendarCellBody>
+      </CalendarCellContent>
+    </Calendar>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/App.tsx": AppTs,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/calendar/index.ts

@@ -12,6 +12,7 @@ import internationalCalendars from "./international-calendars";
 import visibleMonths from "./visible-months";
 import pageBehaviour from "./page-behaviour";
 import presets from "./presets";
+import customCellContent from "./custom-cell-content";
 
 export const calendarContent = {
   usage,
@@ -28,4 +29,5 @@ export const calendarContent = {
   visibleMonths,
   pageBehaviour,
   presets,
+  customCellContent,
 };

apps/docs/content/components/range-calendar/custom-cell-content.ts

@@ -0,0 +1,46 @@
+const App = `import {RangeCalendar, CalendarCellContent, CalendarCellButton, CalendarCellBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RangeCalendar>
+      <CalendarCellContent>
+        <CalendarCellButton />
+        <CalendarCellBody>
+          <div className="flex flex-col w-full gap-0.5 justify-center items-center p-0.5">
+            <span className="bg-red-600 h-1 w-full rounded-full" />
+            <span className="bg-green-600 h-1 w-full rounded-full" />
+            <span className="bg-yellow-600 h-1 w-full rounded-full" />
+          </div>
+        </CalendarCellBody>
+      </CalendarCellContent>
+    </RangeCalendar>
+  );
+}`;
+
+const AppTs = `import {RangeCalendar, CalendarCellContent, CalendarCellHeader, CalendarCellBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RangeCalendar>
+      <CalendarCellContent>
+        <CalendarCellHeader />
+        <CalendarCellBody>
+          <div className="flex flex-col w-full gap-0.5 justify-center items-center p-0.5">
+            <span className="bg-red-600 h-1 w-full rounded-full" />
+            <span className="bg-green-600 h-1 w-full rounded-full" />
+            <span className="bg-yellow-600 h-1 w-full rounded-full" />
+          </div>
+        </CalendarCellBody>
+      </CalendarCellContent>
+    </RangeCalendar>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/App.tsx": AppTs,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/range-calendar/index.ts

@@ -12,6 +12,7 @@ import internationalCalendars from "./international-calendars";
 import visibleMonths from "./visible-months";
 import pageBehaviour from "./page-behaviour";
 import presets from "./presets";
+import customCellContent from "./custom-cell-content";
 import withMonthAndYearPicker from "./with-month-and-year-picker";
 
 export const rangeCalendarContent = {
@@ -29,5 +30,6 @@ export const rangeCalendarContent = {
   visibleMonths,
   pageBehaviour,
   presets,
+  customCellContent,
   withMonthAndYearPicker,
 };

apps/docs/content/docs/components/calendar.mdx

@@ -129,6 +129,20 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 
 <CodeDemo title="Presets" files={calendarContent.presets} />
 
+### Custom Cell Content
+
+The Calendar component supports customizing the cell content in two ways:
+
+<CodeDemo title="Custom Cell" files={calendarContent.customCellContent} />
+
+The Calendar provides three components for cell customization:
+
+- `CalendarCellContent`: The wrapper component for the cell content
+- `CalendarCellHeader`: The interactive header element that handles selection
+- `CalendarCellBody`: Additional content container below the button
+
+These components inherit all calendar states (selected, disabled, etc.) and maintain proper accessibility.
+
 ## Slots
 
 - **base**: Calendar wrapper, it handles alignment, placement, and general appearance.
@@ -146,6 +160,10 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 - **gridBodyRow**: The date grid body row element (e.g. `<tr>`).
 - **cell**: The date grid cell element (e.g. `<td>`).
 - **cellButton**: The button element within the cell.
+- **cellContent**: The wrapper for custom cell content.
+- **cellHeaderWrapper**: The wrapper for the cell header content.
+- **cellHeader**: The header element within the cell that handles selection.
+- **cellBody**: The container for additional cell content.
 - **pickerWrapper**: The wrapper for the picker
 - **pickerMonthList**: The month list picker.
 - **pickerYearList**: The year list picker.

apps/docs/content/docs/components/range-calendar.mdx

@@ -13,6 +13,7 @@ A range calendar consists of a grouping element containing one or more date grid
 
 ---
 
+
 <CarbonAd/>
 
 ## Installation
@@ -32,8 +33,8 @@ A range calendar consists of a grouping element containing one or more date grid
 
 <ImportTabs
   commands={{
-    main: 'import {RangeCalendar} from "@nextui-org/react";',
-    individual: 'import {RangeCalendar} from "@nextui-org/calendar";',
+    main: 'import {RangeCalendar, CalendarCellContent, CalendarCellButton, CalendarCellBody} from "@nextui-org/react";',
+    individual: 'import {RangeCalendar, CalendarCellContent, CalendarCellButton, CalendarCellBody} from "@nextui-org/calendar";',
   }}
 />
 
@@ -45,6 +46,56 @@ Date values are provided using objects in the [@internationalized/date](https://
 
 <CodeDemo title="Usage" files={rangeCalendarContent.usage} />
 
+### Custom Cell Content
+
+The Calendar component supports customizing the cell content in two ways:
+
+1. Using a render function:
+```tsx
+<RangeCalendar>
+  {(date, cellState) => (
+    <CalendarCellContent>
+      <CalendarCellButton>
+        <span 
+          className={
+            getDayOfWeek(date, locale) === 0 
+              ? "text-red-500" 
+              : "text-default-500"
+          }
+        >
+          {date.day}
+        </span>
+      </CalendarCellButton>
+    </CalendarCellContent>
+  )}
+</RangeCalendar>
+```
+
+2. Using component composition:
+```tsx
+<RangeCalendar>
+  <CalendarCellContent>
+    <CalendarCellButton />
+    <CalendarCellBody>
+      <div className="flex flex-col w-full gap-0.5 justify-center items-center p-0.5">
+        <span className="bg-red-600 h-1 w-full rounded-full" />
+        <span className="bg-green-600 h-1 w-full rounded-full" />
+        <span className="bg-yellow-600 h-1 w-full rounded-full" />
+      </div>
+    </CalendarCellBody>
+  </CalendarCellContent>
+</RangeCalendar>
+```
+
+The calendar provides three components for cell customization:
+- `CalendarCellContent`: Wrapper component for the entire cell content
+- `CalendarCellButton`: Interactive button element that handles selection
+- `CalendarCellBody`: Container for additional content below the button
+
+These components inherit all calendar states (selected, disabled, etc.) and maintain proper accessibility.
+
+<CodeDemo title="Custom Cell Content" files={rangeCalendarContent.customCellContent} />
+
 ### Disabled
 
 The `isDisabled` boolean prop makes the Calendar disabled. Cells cannot be focused or selected.
@@ -137,6 +188,21 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 
 <CodeDemo title="Presets" files={rangeCalendarContent.presets} />
 
+### Custom Cell Content
+
+The Calendar component supports customizing the cell content in two ways:
+
+<CodeDemo title="Custom Cell" files={rangeCalendarContent.customCellContent} />
+
+The Calendar provides three components for cell customization:
+
+- `CalendarCellContent`: The wrapper component for the cell content
+- `CalendarCellHeader`: The interactive header element that handles selection
+- `CalendarCellBody`: Additional content container below the button
+
+These components inherit all calendar states (selected, disabled, etc.) and maintain proper accessibility.
+
+
 ## Slots
 
 - **base**: Calendar wrapper, it handles alignment, placement, and general appearance.
@@ -154,6 +220,10 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 - **gridBodyRow**: The date grid body row element (e.g. `<tr>`).
 - **cell**: The date grid cell element (e.g. `<td>`).
 - **cellButton**: The button element within the cell.
+- **cellContent**: The wrapper for custom cell content.
+- **cellHeaderWrapper**: The wrapper for the cell header content.
+- **cellHeader**: The header element within the cell that handles selection.
+- **cellBody**: The container for additional cell content.
 - **pickerWrapper**: The wrapper for the picker
 - **pickerMonthList**: The month list picker.
 - **pickerYearList**: The year list picker.

packages/components/calendar/__tests__/calendar.test.tsx

@@ -464,4 +464,25 @@ describe("Calendar", () => {
       expect(year).toHaveAttribute("data-value", "2567");
     });
   });
+
+  describe("Custom cell content", () => {
+    it("should render custom content in the calendar cells", () => {
+      const wrapper = render(
+        <Calendar defaultValue={new CalendarDate(2024, 3, 31)}>
+          {(date) => (
+            <div>
+              {date.day}
+              <span>*</span>
+            </div>
+          )}
+        </Calendar>,
+      );
+
+      const gridCells = wrapper.getAllByRole("gridcell");
+      const customContentCell = gridCells.find((cell) => cell.textContent === "31*");
+
+      expect(customContentCell).not.toBeNull();
+      expect(customContentCell).toHaveTextContent("31*");
+    });
+  });
 });

packages/components/calendar/__tests__/range-calendar.test.tsx

@@ -748,4 +748,30 @@ describe("RangeCalendar", () => {
       expect(end).toEqual(new CalendarDate(2019, 6, 25));
     });
   });
+
+  describe("Custom cell content", () => {
+    it("should render custom content in the range calendar cells", () => {
+      const wrapper = render(
+        <RangeCalendar
+          defaultValue={{start: new CalendarDate(2024, 6, 25), end: new CalendarDate(2024, 6, 26)}}
+        >
+          {(date) => (
+            <div>
+              {date.day}
+              <span>*</span>
+            </div>
+          )}
+        </RangeCalendar>,
+      );
+
+      const gridCells = wrapper.getAllByRole("gridcell");
+      const customContentCellA = gridCells.find((cell) => cell.textContent === "25*");
+      const customContentCellB = gridCells.find((cell) => cell.textContent === "26*");
+
+      expect(customContentCellA).not.toBeNull();
+      expect(customContentCellA).toHaveTextContent("25*");
+      expect(customContentCellB).not.toBeNull();
+      expect(customContentCellB).toHaveTextContent("26*");
+    });
+  });
 });

packages/components/calendar/src/calendar-cell-body.tsx

@@ -0,0 +1,29 @@
+import type {HTMLNextUIProps} from "@nextui-org/system";
+
+import React from "react";
+
+import {useCalendarContext} from "./calendar-context";
+
+interface Props extends HTMLNextUIProps<"div"> {
+  children: React.ReactNode;
+}
+
+export type CalendarCellBodyProps = Props;
+
+export const CalendarCellBody = React.forwardRef<HTMLDivElement, CalendarCellBodyProps>(
+  ({children, ...props}, ref) => {
+    const {slots, classNames} = useCalendarContext();
+    const bodyProps = {
+      ...props,
+      ref: ref,
+      className: slots?.cellBody({class: classNames?.cellBody}),
+      "data-slot": "cell-body",
+    };
+
+    return <div {...bodyProps}>{children}</div>;
+  },
+);
+
+CalendarCellBody.displayName = "NextUI.CalendarCellBody";
+
+export default CalendarCellBody;

packages/components/calendar/src/calendar-cell-content-default.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import {CalendarDate} from "@internationalized/date";
+
+import {CalendarCellContent} from "./calendar-cell-content";
+import {CalendarCellHeader} from "./calendar-cell-header";
+
+export interface CalendarCellContentDefaultProps {
+  date: CalendarDate;
+}
+
+export const CalendarCellContentDefault: React.FC<CalendarCellContentDefaultProps> = ({date}) => {
+  return (
+    <CalendarCellContent>
+      <CalendarCellHeader>{date.day}</CalendarCellHeader>
+    </CalendarCellContent>
+  );
+};
+
+CalendarCellContentDefault.displayName = "NextUI.CalendarCellContentDefault";