## MiniCalendar  
Compact calendar to display a small number of days in a row  
Category: Date Pickers  

### Simple Example

```python
import dash_mantine_components as dmc
from dash import callback, Input, Output


component = dmc.Stack([
    dmc.MiniCalendar(
        defaultDate="2025-01-02",
        value="2025-01-03",
        id="mini-calendar"
    ),
    dmc.Text(id="mini-calendar-date", m="md")
])

@callback(
    Output("mini-calendar-date", "children"),
    Input("mini-calendar", "value"),
)
def update(d):
    return f"You selected: {d}"
```
### Number of days

Use numberOfDays prop to control how many days are displayed at once. The default value is 7.


```python
import dash_mantine_components as dmc

component = dmc.MiniCalendar(numberOfDays=5)
```
### getDayProps


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
  

Use `getDayProps` to add custom props to days, for example, assign styles to weekends:


```python
import dash_mantine_components as dmc

component = dmc.MiniCalendar(
    numberOfDays=8,
    getDayProps={"function":"weekendRed"}
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

// dayjs is loaded globally via Dash external_scripts.
// For details, see DatesProvider docs: https://www.dash-mantine-components.com/components/datesprovider
var dayjs = window.dayjs;

dmcfuncs.weekendRed = function (dateStr) {
  const d = dayjs(dateStr);

  if ([0, 6].includes(d.day())) {
    return {
      style: {
        color: 'var(--mantine-color-red-8)',
      },
    };
  }

  return {};
};
```


### Min and max dates
Use `minDate` and `maxDate` props to limit date selection:


```python
import dash_mantine_components as dmc

component = dmc.MiniCalendar(
    numberOfDays=6,
    defaultDate="2025-04-13",
    minDate = "2025-04-14",
    maxDate = "2025-04-24",
)
```
### Localization
You can change localization both on component level with locale prop and globally with [DatesProvider](/components/datesprovider).


```python
import dash_mantine_components as dmc


component = dmc.DatesProvider(
    dmc.MiniCalendar(locale="fr", defaultDate="2025-04-01"),
    settings={"locale": "fr"}
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


Here’s your content reformatted as Markdown tables:

#### MiniCalendar selectors

| Selector  | Static selector                   | Description                                                                |
| --------- | --------------------------------- | -------------------------------------------------------------------------- |
| root      | `.mantine-MiniCalendar-root`      | Root element                                                               |
| control   | `.mantine-MiniCalendar-control`   | Button in the dropdown which is used to select hours/minutes/seconds/am-pm |
| days      | `.mantine-MiniCalendar-days`      | Days container                                                             |
| day       | `.mantine-MiniCalendar-day`       | Single day element                                                         |
| dayMonth  | `.mantine-MiniCalendar-dayMonth`  | Day element in month view                                                  |
| dayNumber | `.mantine-MiniCalendar-dayNumber` | Day number element                                                         |

---

#### MiniCalendar CSS variables

| Selector | Variable                    | Description                                       |
| -------- | --------------------------- | ------------------------------------------------- |
| root     | `--mini-calendar-font-size` | Controls size of all elements (based on em units) |

---

#### MiniCalendar data attributes

| Selector | Attribute | Condition                                              | Value                |
| -------- | --------- | ------------------------------------------------------ | -------------------- |
| control  | disabled  | Next/previous range is after maxDate or before minDate | –                    |
| control  | direction | –                                                      | `previous` or `next` |
| day      | selected  | The day matches the value                              | –                    |
| day      | disabled  | The day is before minDate or after maxDate             | –                    |

---


### Keyword Arguments
#### MiniCalendar

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- date (string; optional):
    Controlled component date value, start date of the interval.

- defaultDate (string; optional):
    Uncontrolled component default value, start date of the interval.

- getDayProps (boolean | number | string | dict | list; optional):
    A function that passes props down Day component  based on date.
    (See https://www.dash-mantine-components.com/functions-as-props).

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- locale (string; optional):
    dayjs locale used for formatting.

- maxDate (string; optional):
    Maximum date that can be selected, date object or date string in
    `YYYY-MM-DD` format.

- minDate (string; optional):
    Minimum date that can be selected, date object or date string in
    `YYYY-MM-DD` format.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- monthLabelFormat (string; optional):
    Dayjs format string for month label default `MMM`.

- numberOfDays (number; optional):
    Number of days to display in the calendar default 7.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Component size default 'sm'.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- value (string; optional):
    Selected date, controlled value.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.