QCalendarAgenda presents days as compact columns or agenda lanes instead of a time-grid. It is useful when users need to scan a range of dates, compare day content, or review lightweight planning data without the vertical interval structure of a day calendar.

Use this calendar when the date itself is the main grouping and exact start/end times are secondary. Agenda views work well for planners, availability summaries, simple booking overviews, and dashboards where several days should stay visible at once.

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 the agenda should work from a specific anchor date instead of relying on the default date handling. This is useful when your app stores dates in a normalized format and passes them into the calendar.

Dark

Use the Toggle Dark Mode control to compare the agenda 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.

This example also uses the max-days property.

Scroll to Date

Use scrollToDate() to bring a date from the currently rendered range into view. The method returns false when the date is invalid or outside that 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.

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.

Day Week - Max. Days

Use max-days to limit how many days render in a day/week style agenda. This keeps dense agenda layouts readable when the surrounding page has limited horizontal space.

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 users expect weeks to start on Monday instead of Sunday. The weekday headers and rendered date range shift together.

Five Day Workweek

Use weekdays to render only the days that matter for the agenda. This example shows a Monday through Friday calendar without weekend columns.

Locale

Locale affects the generated weekday and date labels. Use it when the calendar should follow the same language and regional formatting as your app.

No Active Date

Use no-active-date when the agenda should avoid highlighting the model date as the active day. This is useful for read-only or summary views where selection state would be misleading.

Now

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

Theme

The theme example shows how calendar CSS variables can be changed together to create a branded visual style without rewriting component internals.

Transitions

Transitions animate the agenda content when moving between date ranges. Use them when navigation should feel spatial instead of abruptly swapping the visible days.

Recipes

Planner

This is a rudimentary Planner using QCalendarAgenda.

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

Agenda views can use Timestamp adapters for native labels and native-keyed data while keeping the same adapter-native date contract as the rest of QCalendar.

This example renders Islamic Civil (Hijri), Indian National (Saka), Hebrew, or Persian labels inside the header and day slots. It is useful for planning views where users need native calendar context, while Gregorian interop remains available through slot identity metadata.