Mini-Mode Breakpoint
This example tests the mini-mode="auto" with breakpoint="sm" properties, which changes the month calendar into mini-mode.
TIP
You will have to open your dev tools and change the width of the web page to see this example in action.
TIP
The calendar will fire the event @mini-mode with true or false. This can be captured if needed. For instance, controlling the day-height property.
:day-height="isMiniMode ? 0 : 50"Mini-Mode Dark
Mini-Mode Date Type
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
Mini-Mode Five Day Workweek
Mini-Mode Locale
Mini-Mode Min Weekday Label
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
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
Mini-Mode No Outside Days
Mini-Mode Now
The current date has been set to tomorrow via the now property.
Mini-Mode QInput
This example uses Quasar’s QInput component with a mask and regex. The navigation buttons are embedded into the popup.