mantine-calendar-rows

English | Deutsch

Drop-in wrappers around @mantine/dates calendar components that add a numberOfRows prop, allowing multi-row grid layouts — for example a 4-month calendar rendered as a 2×2 grid instead of 1×4.

Why?

@mantine/dates supports numberOfColumns out of the box, which lays months / years / decades next to each other in a single horizontal row. That works fine for 2–3 months, but falls apart visually and spatially for 6, 8 or 12 months. The natural fix is a numberOfRows prop that reshapes the existing levels into a grid.

There is an upstream PR for this but it has not been merged. mantine-calendar-rows gives you the feature today without forking Mantine — it depends on the unmodified upstream @mantine/dates as a peer dependency, so you always stay on the latest official release.

Approach

Instead of patching Mantine internals, the wrapper uses Mantine's public API:

1. It asks the original component to render numberOfColumns × numberOfRows levels by passing the product as numberOfColumns.
2. It overrides the inner levelsGroup slot via the standard StylesApi, switching its default display: flex to display: grid with numberOfColumns actual columns.

From Mantine's perspective there is still exactly one logical row of N levels, so its withNext / withPrevious / navigation-chevron logic keeps working correctly. Only the visual layout is rearranged.

No DOM patching, no forks, no portal hacks, no internal imports.

When numberOfRows is 1 (or omitted), the wrapped component is a pure pass-through and adds zero runtime overhead.

Installation

npm install mantine-calendar-rows
# or
yarn add mantine-calendar-rows

@mantine/dates, @mantine/core and react are peer dependencies — they are expected to be installed by the host application.

Usage

Just replace your @mantine/dates import with mantine-calendar-rows for the components that should support the new prop:

// Before
import { Calendar, DatePickerInput } from "@mantine/dates";

// After
import { Calendar, DatePickerInput } from "mantine-calendar-rows";

export function Demo() {
  return (
    <>
      {/* 4 months as a 2x2 grid */}
      <Calendar numberOfColumns={2} numberOfRows={2} />

      {/* 6 months as a 3x2 grid inside a popover input */}
      <DatePickerInput
        type="range"
        numberOfColumns={3}
        numberOfRows={2}
        placeholder="Pick range"
      />
    </>
  );
}

All existing @mantine/dates props are forwarded verbatim — you do not lose anything by switching imports.

Exported components

Each wrapper accepts the same props as its @mantine/dates counterpart plus an optional numberOfRows?: number.

| Component | Notes | | ------------------ | -------------------------------------------------- | | Calendar | Inline calendar — month / year / decade levels | | DatePicker | Inline date picker | | DatePickerInput | Text input with popover calendar | | DateInput | Formatted text input with popover calendar | | DateTimePicker | Date + time input | | MonthPicker | Inline month picker | | MonthPickerInput | Month picker with input + popover | | YearPicker | Inline year picker | | YearPickerInput | Year picker with input + popover | | MonthLevelGroup | Low-level level group | | YearLevelGroup | Low-level level group | | DecadeLevelGroup | Low-level level group |

Wrap your own components

For anything not in the list above — a custom component that internally renders a Mantine calendar, for example — use the withNumberOfRows HOC:

import { withNumberOfRows } from "mantine-calendar-rows";
import { SomeCalendarComponent } from "somewhere";

const SomeCalendarWithRows = withNumberOfRows(
  SomeCalendarComponent,
  "SomeCalendarComponent",
);

The target component needs to accept numberOfColumns and styles in the shape of Mantine's StylesApi (i.e. styles.levelsGroup).

Requirements

• @mantine/dates >= 8 (tested against 9.x)
• @mantine/core >= 8
• react >= 18

Links

• GitHub repository
• npm package
• Issue tracker

Feedback & Contributing

Bug reports, feature requests and feedback are very welcome. The best place is the issue tracker — no template needed, just describe what you ran into or what you would like to see. Pull requests are also welcome; for larger changes please open an issue first so we can align on the approach.

License

Apache 2.0 — see LICENSE.