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.

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

@@ -464,4 +464,28 @@ describe("Calendar", () => {
       expect(year).toHaveAttribute("data-value", "2567");
     });
   });
+
+  describe("Custom cell content", () => {
+    it("should render custom content in the calendar cells", () => {
+      const renderCellContent = (date: CalendarDate) => (
+        <div>
+          {date.day}
+          <span>*</span>
+        </div>
+      );
+
+      const wrapper = render(
+        <Calendar
+          defaultValue={new CalendarDate(2024, 3, 31)}
+          renderCellContent={renderCellContent}
+        />,
+      );
+
+      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,31 @@ 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 renderCellContent = (date: CalendarDate) => (
+        <div>
+          {date.day}
+          <span>*</span>
+        </div>
+      );
+
+      const wrapper = render(
+        <RangeCalendar
+          defaultValue={{start: new CalendarDate(2024, 6, 25), end: new CalendarDate(2024, 6, 26)}}
+          renderCellContent={renderCellContent}
+        />,
+      );
+
+      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-button.tsx

@@ -0,0 +1,74 @@
+import type {HTMLNextUIProps} from "@nextui-org/system";
+
+import {useRef} from "react";
+import {useHover} from "@react-aria/interactions";
+import {useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
+import {dataAttr} from "@nextui-org/shared-utils";
+
+import {useCalendarCell} from "./calendar-cell-context";
+import {useCalendarContext} from "./calendar-context";
+
+export interface CalendarCellButtonProps extends HTMLNextUIProps<"div"> {
+  children?: React.ReactNode;
+}
+
+export const CalendarCellButton = ({children, ...props}: CalendarCellButtonProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const {slots, classNames} = useCalendarContext();
+  const {
+    state,
+    buttonProps,
+    isSelected,
+    isDisabled,
+    isInvalid,
+    isOutsideMonth,
+    isToday,
+    isUnavailable,
+    isRangeSelection,
+    isRangeStart,
+    isRangeEnd,
+    isSelectionStart,
+    isSelectionEnd,
+  } = useCalendarCell();
+
+  const {focusProps, isFocusVisible} = useFocusRing();
+  const {hoverProps, isHovered} = useHover({
+    isDisabled: isDisabled || isUnavailable || state.isReadOnly,
+  });
+
+  // Extract pressed from buttonProps using optional chaining
+  const isPressed = buttonProps["aria-pressed"] === true;
+
+  const {date} = useCalendarCell();
+
+  return (
+    <div
+      {...mergeProps(buttonProps, hoverProps, focusProps, props)}
+      ref={ref}
+      className={slots?.cellButton({class: classNames?.cellButton})}
+      data-disabled={dataAttr(isDisabled && !isInvalid)}
+      data-focus-visible={dataAttr(isFocusVisible)}
+      data-hover={dataAttr(isHovered)}
+      data-invalid={dataAttr(isInvalid)}
+      data-outside-month={dataAttr(isOutsideMonth)}
+      data-pressed={dataAttr(isPressed && !state.isReadOnly)}
+      data-range-end={dataAttr(isRangeEnd)}
+      data-range-selection={dataAttr(isRangeSelection)}
+      data-range-start={dataAttr(isRangeStart)}
+      data-readonly={dataAttr(state.isReadOnly)}
+      data-selected={dataAttr(isSelected)}
+      data-selection-end={dataAttr(isSelectionEnd)}
+      data-selection-start={dataAttr(isSelectionStart)}
+      data-slot="cell-button"
+      data-today={dataAttr(isToday)}
+      data-unavailable={dataAttr(isUnavailable)}
+    >
+      {children ? children : date.day}
+    </div>
+  );
+};
+
+CalendarCellButton.displayName = "NextUI.CalendarCellButton";
+
+export default CalendarCellButton;

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 {CalendarCellButton} from "./calendar-cell-button";
+
+export interface CalendarCellContentDefaultProps {
+  date: CalendarDate;
+}
+
+export const CalendarCellContentDefault: React.FC<CalendarCellContentDefaultProps> = ({date}) => {
+  return (
+    <CalendarCellContent>
+      <CalendarCellButton>{date.day}</CalendarCellButton>
+    </CalendarCellContent>
+  );
+};
+
+CalendarCellContentDefault.displayName = "NextUI.CalendarCellContentDefault";

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

@@ -0,0 +1,25 @@
+import type {HTMLNextUIProps} from "@nextui-org/system";
+
+import {useCalendarContext} from "./calendar-context";
+
+export interface CalendarCellContentProps extends HTMLNextUIProps<"div"> {
+  children: React.ReactNode;
+}
+
+export const CalendarCellContent = ({children, ...props}: CalendarCellContentProps) => {
+  const {slots, classNames} = useCalendarContext();
+
+  return (
+    <div
+      className={slots?.cellContent({class: classNames?.cellContent})}
+      data-slot="cell-content"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+CalendarCellContent.displayName = "NextUI.CalendarCellContent";
+
+export default CalendarCellContent;

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

@@ -0,0 +1,31 @@
+import type {CalendarState, RangeCalendarState} from "@react-stately/calendar";
+import type {CalendarDate} from "@internationalized/date";
+import type {DOMAttributes} from "@react-types/shared";
+
+import {createContext} from "@nextui-org/react-utils";
+
+export interface CalendarCellContextType {
+  date: CalendarDate;
+  state: CalendarState | RangeCalendarState;
+  buttonProps: DOMAttributes;
+  isSelected: boolean;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isUnavailable: boolean;
+  isOutsideMonth: boolean;
+  isToday: boolean;
+  isPressable: boolean;
+  isRangeSelection: boolean;
+  isRangeStart: boolean;
+  isRangeEnd: boolean;
+  isSelectionStart: boolean;
+  isSelectionEnd: boolean;
+  formattedDate: string;
+}
+
+export const [CalendarCellProvider, useCalendarCell] = createContext<CalendarCellContextType>({
+  name: "CalendarCellContext",
+  strict: true,
+  errorMessage:
+    "useCalendarCell: `context` is undefined. Seems you forgot to wrap component within the CalendarCellProvider",
+});