QCalendarScheduler groups a day-oriented calendar by resource while keeping date columns visible. It is designed for schedules where each resource owns work across one or more days.
Use this calendar when users need a resource-first planning board with day cells instead of a detailed interval grid. Scheduler views work well for teams, locations, lanes, assets, or other resources where the main task is assigning and reviewing work by day.
Scroll Events
Listen to @scroll for live updates from the internal scroll area and @scrollend for one update after scrolling settles. Both events receive a CalendarScrollEvent object with the native event, scrolling target, scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, and clientHeight.
When no-scroll is enabled, listen for scroll events on the external scrolling element instead.
Date Type
Use date-type when scheduler dates need to match the format used by your data source. This keeps the rendered schedule anchored to the intended date.
Dark
Use the Toggle Dark Mode control to compare the scheduler calendar in light and dark styling without changing the global site theme.
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 extend beyond its horizontal boundaries.
The calendar goes into a special sticky mode when this happens so you can scroll vertically and/or horizontally.
Scroll to Date
Use scrollToDate() to bring a date from the currently rendered range into view. It does not change the model value or load another range. The optional second argument sets the animation duration in milliseconds. The method returns false when the date is invalid or outside the rendered range; those requests are not retained. A valid request made from a parent’s onMounted() while date columns are still registering is completed after the current render flush.
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
Set first-day-monday when scheduler weeks should begin on Monday. This aligns the resource columns with regional or business calendar expectations.
Five Day Workweek
Use weekdays to show a resource schedule for working days only. This removes weekend columns when they are not part of the workflow.
Focusable Hoverable
TIP
If the property focus-type contains weekday, you can also use the Enter or Space keys for date selection.
Locale
Locale controls generated date and weekday labels. Use it when scheduler headers should match the language and regional formatting of your app.
No Active Date
Use no-active-date when the model date should not be highlighted in the scheduler. This is helpful for read-only resource overviews.
Now
The current date has been set to tomorrow via the now property.
Theme
The theme example shows how scheduler CSS variables can be customized to create a branded resource schedule without changing component behavior.
Width Height
There is no dedicated resource-width prop on QCalendarScheduler.
To control the left resources pane width, set the css variable --calendar-resources-width on the calendar, for example through :style or a custom class.
The example below uses that css variable together with resource-height, resource-min-height, and cell-width.
Slots
Slots let you customize resource headers, resource labels, and day cells while the scheduler continues to manage the resource/date grid.
Head Resources
The scheduler resource header defaults to Resources. Use this slot to localize the label or replace it with custom header content.
Resource Days
Resource Label
Recipes
Children
Custom Height
You can have each resource row have it’s own specific height by including a height key (as a number of pixels, without the px) in each resource object. For example:
;[
{ id: '1', name: 'John', height: 20 },
{
id: '2',
name: 'Board Room',
height: 40,
expanded: false,
children: [
{ id: '2.1', name: 'Room-1', height: 20 },
{
id: '2.2',
name: 'Room-2',
height: 40,
expanded: false,
children: [
{ id: '2.2.1', name: 'Partition-A', height: 20 },
{ id: '2.2.2', name: 'Partition-B', height: 20 },
{ id: '2.2.2', name: 'Partition-C', height: 20 },
],
},
],
},
{ id: '3', name: 'Mary' },
{ id: '4', name: 'Susan' },
{ id: '5', name: 'Olivia' },
]TIP
If the resource-min-height is more than your custom height, then you won’t see the custom height work. Either set resource-min-height to a lower value or to 0 (for auto).
Drag And Drop
Drag any items in the list to a calendar day or the top header.
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).
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
Scheduler views combine resources with visible days. Use the adapter-aware slot scope fields to render native calendar labels or match native-keyed resource data.