QCalendarMonth mini-mode is a compact version of the month calendar. It keeps the same date-grid model while reducing visual weight so the calendar can live inside denser layouts.

Use mini-mode for date pickers, sidebars, filters, dashboards, and responsive layouts where a full month calendar would take too much space. It is especially useful when the calendar is a navigation or selection aid instead of the primary workspace.

Mini-Mode Breakpoint

This example tests the mini-mode="auto" with breakpoint="sm" properties, which changes the month calendar into mini-mode.

:day-height="isMiniMode ? 0 : 50"

Mini-Mode Dark

Use the dark example to confirm mini-mode follows the same dark styling behavior as the full month calendar. Use the Toggle Dark Mode control to compare both states without changing the global site theme.

Mini-Mode Date Type

Use date-type when mini-mode should interpret the model date in a specific way. This keeps compact date pickers aligned with the format your app stores.

Mini-Mode Disabled Before After

All days before and after the current day have been disabled with the disabled-before and disabled-after properties.

Mini-Mode Disabled Days

The example anchors its date to a visible month and disables a short run of visible days with the disabled-days property.

The first example uses an array of dates to disable each specific date.

The second example uses the object form with from, to, color, and textColor to create a reservation-style disabled range.

Mini-Mode Disabled Weekdays

The weekends have been disabled with the disabled-weekdays property.

Mini-Mode First Day Monday

Set first-day-monday when the compact calendar should start weeks on Monday. This mirrors the full month behavior in a smaller layout.

Mini-Mode Five Day Workweek

Use weekdays to show only workweek days in mini-mode. This is useful when the compact calendar sits beside scheduling tools that ignore weekends.

Mini-Mode Locale

Locale controls generated labels in the compact calendar. Use it so mini-mode matches the language and regional formatting of your app.

Mini-Mode Min Weekday Label

Use min-weekday-label to control how short the weekday labels become in tight layouts. This helps mini-mode stay readable at small widths.

Mini-Mode Min Weeks

You can use the min-weeks property to keep a consistent height for your calendar (no shifting up and down).

Mini-Mode Multi Month Selection

Multi-month selection demonstrates how selected dates can remain visible while users move across months. This is useful for compact range pickers and availability tools.

Mini-Mode Navigation

For keyboard navigation use the use-navigation property along with the focusable and focus-type properties.

When the calendar has focus use the Home, End, ←, →, ↑, ↓, PgUp, PgDn, Home and , Endkeys.

You can also use Tab and Shift+Tab for regular browser navigation.

Mini-Mode No Active Date

Use no-active-date when mini-mode should not highlight the model date. This is useful when the compact calendar is acting as a navigator rather than a selector.

Mini-Mode No Outside Days

Use no-outside-days to hide dates from adjacent months. In mini-mode, this can make the compact grid feel less crowded.

Mini-Mode Now

The current date has been set to tomorrow via the now property.

Mini-Mode Selected Dates

Use selected-dates to mark important days in the compact month grid. This works well for small availability, event, or reminder indicators.

Mini-Mode Selection

Selection shows how mini-mode can support picking a date or range from a compact calendar surface.

Mini-Mode Theme

The theme example confirms mini-mode responds to the same calendar CSS variables as the full month view.

Recipes

QInput

This example uses Quasar’s QInput component with a mask and regex. The navigation buttons are embedded into the popup.

Workweeks

Server Data

This recipe keeps the calendar empty until you click Load visible range. The button simulates waiting for a server response, then fills the visible calendar with data returned for the current range.

Calendar Adapters

Mini-mode supports the same native month adapter behavior as the full month view. The compact grid can use native month starts, native month ends, and native outside-day state while emitting adapter-native dates.