Scheduler - Performance
Reference for density, timeline virtualization, event volume, and large resource sets.
#Usage
import { Scheduler } from '@primeui/vue-scheduler';#Performance
Scheduler can render dense operational views. The parent application still controls the size of the data passed to it. Start by limiting data to the visible workflow, then tune view-specific options.
Keep the controlled arrays stable when possible. Recreate events, resources, and categories when the data changes, not on every render tick, so custom child parts and overlays have less work to repeat.
#Practical Limits
| Area | Guidance |
|---|---|
| Visible date range | Keep the active range aligned with the task |
| Event arrays | Pass the events needed for the visible range and nearby interactions |
| Resource arrays | Filter to the active department, team, or asset group before rendering large organizations |
| Custom UI | Keep event cards and resource rows lightweight |
| Overlays | Load large detail panels after the overlay opens |
#Timeline Virtualization
Use timeline virtualization for timeline and resource timeline surfaces that have long horizontal ranges. It is not used by month, week, day, agenda, or resource day grids.
Start with timelineVirtualScroll="auto" when a timeline can cross the virtual threshold, then tune slot size before increasing data volume. Narrow slots show more range in the viewport, but they can make event labels and drag handles harder to use.
| Setting | Effect |
|---|---|
timelineSlotDuration | Number of minutes represented by each slot |
timelineSlotWidth | Pixel width of each slot |
timelineVirtualScroll | Virtualizes long horizontal ranges when enabled or set to auto |
timelineVirtualThreshold | Minimum slot count before auto virtualization is useful |
timelineVirtualOverscan | Extra virtual slots kept mounted around the viewport |
Use a smaller timelineSlotDuration when users need finer time precision. Use a larger timelineSlotWidth when event labels, resize handles, or drag targets need more room. If auto does not enable virtualization for a known-large timeline, lower timelineVirtualThreshold; if scrolling exposes blank edges, raise timelineVirtualOverscan.
Timeline virtualization clips horizontal timeline cells and event bars around the scroll viewport. It does not filter the resource collection. For very large teams, filter or page resources before rendering, then use virtualization to keep long horizontal ranges responsive.
The demo below keeps the resource count steady and increases event volume so the rendered counts show the difference between total data and the virtual window.
#Timeline Sizing
Resource timeline performance depends on the number of visible rows and the amount of content in each row.
| Option | Use when |
|---|---|
resourceAreaWidth | Resource labels need a stable rail width |
resourcesExpandable | Hierarchies hide child rows until needed |
resourcesInitiallyExpanded | The first render shows or collapses children |
showAggregatedEvents | Parent rows need summaries without rendering every child detail |
rowAutoHeight | Event stacks need more than the default lane height |
Keep rowAutoHeight off unless stacked events or custom rows need natural height. Fixed heights are cheaper for scanning large resource sets.
#Dense Month Overflow
Month view uses overflow instead of shrinking every card in dense cells. Tune maxEventsVisible for the available cell height. Keep showMorePopover enabled when users need access to hidden events.
| Dense month problem | Prefer |
|---|---|
| Too many events in one day | Lower maxEventsVisible and use more popover |
| Long event titles | Short event titles plus details in an overlay |
| Too many visible categories | Category filtering before rendering the month |
#Recurrence
Recurring events expand into visible instances for rendering. Keep recurrence rules focused, avoid open-ended series in interactive examples, and update the parent event array only after the user chooses the intended recurrence scope.
#Custom Components
Custom event, resource, and overlay components run for every rendered item on that surface. Keep computed work local, avoid expensive formatting inside large loops, and pass precomputed labels through metadata when the same value is shown repeatedly.
Prefer context hooks inside reusable UI parts and keep heavy formatting in computed values. Event cards should render from already-prepared labels when a view shows hundreds of events.