Alignment
You can use the properties date-align and weekday-align to manipulate how the header area looks.
Dark
This will only make sense if your browser is currently in light mode.
Date Type
Day Height
When the day-height property is 0, then the height is set to auto, which will increase the row by the contained contents. If there is no content, then the row may look too small in height. In this case, use the day-min-height to specify a minimum height that should be used.
When both day-height and day-min-height are both set to 0, and the height of the calendar is more than the content, then the calendar will divide the weeks evenly to the bottom of the height.
TIP
When both day-height and day-min-height are both set to 0, in this example, the height of the calendar will be set to 600px.
Day of Year
Disabled Before After
All days before and after the current day have been disabled with the disabled-before and disabled-after properties.
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.
Disabled Weekdays
The weekends have been disabled with the disabled-weekdays property.
Drag and Drop
Drag any items in the list to a calendar day.
TIP
Don’t use css border to outline a cell. It won’t look right because the calendar is already using the borders and some are explicitly turned off.
Instead use box-shadow to create an inset like this box-shadow: inset 0 0 0 1px rgba(0,140,200,.8).
First Day Monday
Sidebar Mini Calendar
Use a mini-mode QCalendarMonth beside a larger calendar when you want a navigation pattern similar to Google Calendar or Microsoft Outlook. Both calendars can share the same v-model, while the sidebar calendar acts as a compact date picker.
Five Day Workweek
Focusable/Hoverable
Label Size
The month-label-size property changes the size of the inline month label text rendered inside month cells.
TIP
This property only has a visible effect when the month label is actually shown. In QCalendarMonth, that typically means using date-align="left" or date-align="right". With the default centered date alignment, the inline month label is not rendered.
Locale
Min Weeks
You can use the min-weeks property to keep a consistent height for your calendar (no shifting up and down of the bottom calendar for different months).
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.
No Active Date
No Outside Days
Now
The current date has been set to tomorrow via the now property.
Selected Dates
Selection Range
Slot - Day (Holidays)
Slot - Day
Slot - Week
Theme
Transitions
Workweeks
Use show-work-weeks to show the workweek column. The head-workweek slot replaces the header cell that defaults to #, and the workweek slot replaces each rendered workweek label. If the custom label is wider than the default, increase --calendar-work-week-width.