Cal

.changeset/tame-students-tan.md

@@ -0,0 +1,18 @@
+---
+"@heroui/calendar": patch
+---
+
+### Changes
+- Added support for customizing calendar cells.
+  - You can now use `children` to customize the content of calendar cells.
+  - The default structure of calendar cells has been updated to improve flexibility.
+
+```jsx
+<Calendar>
+  {(date) => (
+    <div style={{ backgroundColor: "lightblue" }}>
+      <span>{date.day}</span>
+    </div>
+  )}
+</Calendar>
+```

apps/docs/content/components/calendar/custom-cell-content.raw.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import {Calendar, CalendarCellContent, CalendarCellHeader, CalendarCellBody} from "@heroui/react";
+
+export default function App() {
+  return (
+    <Calendar calendarWidth={400}>
+      {(date) => (
+        <CalendarCellContent>
+          <CalendarCellHeader />
+          <CalendarCellBody>
+            <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
+              {date.day % 7 === 0 && (
+                <span
+                  aria-label="Calendar event"
+                  className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+              {date.day % 5 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+              {date.day % 3 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+            </div>
+          </CalendarCellBody>
+        </CalendarCellContent>
+      )}
+    </Calendar>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./custom-cell-content.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -13,6 +13,7 @@ import visibleMonths from "./visible-months";
 import firstDayOfWeek from "./first-day-of-week";
 import pageBehaviour from "./page-behaviour";
 import presets from "./presets";
+import customCellContent from "./custom-cell-content";
 
 export const calendarContent = {
   usage,
@@ -30,4 +31,5 @@ export const calendarContent = {
   firstDayOfWeek,
   pageBehaviour,
   presets,
+  customCellContent,
 };

apps/docs/content/components/range-calendar/custom-cell-content.raw.jsx

@@ -0,0 +1,49 @@
+import {
+  RangeCalendar,
+  CalendarCellContent,
+  CalendarCellHeader,
+  CalendarCellBody,
+} from "@heroui/react";
+
+export default function App() {
+  return (
+    <RangeCalendar calendarWidth={400}>
+      {(date) => (
+        <CalendarCellContent>
+          <CalendarCellHeader />
+          <CalendarCellBody>
+            <div className="flex flex-col w-full text-tiny gap-0.5 px-0.5">
+              {date.day % 7 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-red-500/20 w-full rounded-md px-1 text-red-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+              {date.day % 5 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-green-500/20 w-full rounded-md px-1 text-green-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+              {date.day % 3 === 0 && (
+                <span
+                  aria-label="calendar event"
+                  className="bg-yellow-500/20 w-full rounded-md px-1 text-yellow-400 line-clamp-1"
+                  role="status"
+                >
+                  MTG
+                </span>
+              )}
+            </div>
+          </CalendarCellBody>
+        </CalendarCellContent>
+      )}
+    </RangeCalendar>
+  );
+}

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

@@ -0,0 +1,9 @@
+import App from "./custom-cell-content.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -13,6 +13,7 @@ import visibleMonths from "./visible-months";
 import firstDayOfWeek from "./first-day-of-week";
 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 = {
@@ -31,5 +32,6 @@ export const rangeCalendarContent = {
   firstDayOfWeek,
   pageBehaviour,
   presets,
+  customCellContent,
   withMonthAndYearPicker,
 };

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

@@ -135,6 +135,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.
@@ -152,6 +166,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 "@heroui/react";',
-    individual: 'import {RangeCalendar} from "@heroui/calendar";',
+    main: 'import {RangeCalendar, CalendarCellContent, CalendarCellHeader, CalendarCellBody} from "@heroui/react";',
+    individual: 'import {RangeCalendar, CalendarCellContent, CalendarCellHeader, CalendarCellBody} from "@heroui/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>
+      <CalendarCellHeader>
+        <span 
+          className={
+            getDayOfWeek(date, locale) === 0 
+              ? "text-red-500" 
+              : "text-default-500"
+          }
+        >
+          {date.day}
+        </span>
+      </CalendarCellHeader>
+    </CalendarCellContent>
+  )}
+</RangeCalendar>
+```
+
+2. Using component composition:
+```tsx
+<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>
+```
+
+The calendar provides three components for cell customization:
+- `CalendarCellContent`: Wrapper component for the entire cell content
+- `CalendarCellHeader`: 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.
@@ -143,6 +194,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.
@@ -160,6 +226,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

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import * as React from "react";
 import {render, act, fireEvent} from "@testing-library/react";
-import {CalendarDate, isWeekend} from "@internationalized/date";
+import {CalendarDate, DateValue, isWeekend} from "@internationalized/date";
 import {triggerPress, keyCodes} from "@heroui/test-utils";
 import {useLocale} from "@react-aria/i18n";
 import {HeroUIProvider} from "@heroui/system";
@@ -11,14 +11,16 @@ import {Calendar as CalendarBase, CalendarProps} from "../src";
 /**
  * Custom calendar to disable animations and avoid issues with react-motion and jest
  */
-const Calendar = React.forwardRef((props: CalendarProps, ref: React.Ref<HTMLDivElement>) => {
-  return <CalendarBase {...props} ref={ref} disableAnimation />;
-});
+const Calendar = React.forwardRef(
+  (props: CalendarProps<DateValue>, ref: React.ForwardedRef<HTMLDivElement>) => {
+    return <CalendarBase {...props} ref={ref} disableAnimation />;
+  },
+);
 
 Calendar.displayName = "Calendar";
 
 const CalendarWithLocale = React.forwardRef(
-  (props: CalendarProps & {locale: string}, ref: React.Ref<HTMLDivElement>) => {
+  (props: CalendarProps<DateValue> & {locale: string}, ref: React.ForwardedRef<HTMLDivElement>) => {
     const {locale, ...otherProps} = props;
 
     return (
@@ -464,4 +466,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*");
+    });
+  });
 });