Dark

This will only make sense if your browser is currently in light mode.

Alignment

You can use the properties date-header, date-align and weekday-align to manipulate how the header area looks.

Cell Width

You can specify the cell-width property to make your calendar overrun it’s horizontal boundaries.

The calendar goes into a special sticky mode when this happens so you can scroll vertically and/or horizontally.

This example also uses the max-days property.

Column Count

The column-count property allows for a single day to be displayed multiple times.

Column Options

The column-options property allows you to define additional left or right columns.

Date Type

Day Week - Max. Days

Disabled Before After

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

Disabled Days

The example anchors its date to a visible week 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.

First Day Monday

Five Day Workweek

Locale

No Active Date

Now

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

Theme

Transitions

Planner

This is a rudimentary Planner using QCalendarAgenda.