Scheduler - Responsive Behavior
Reference for scroll owners, minimum widths, auto-height, and grouped layout behavior.
#Import
import { Scheduler } from '@primeui/vue-scheduler';#Layout Rules
| Surface | Responsive behavior | Primary controls |
|---|---|---|
| Month | Keeps seven columns and uses overflow for dense days | maxEventsVisible, showMorePopover |
| Day and week | Scroll vertically for long time ranges and horizontally when grouped columns need width | height, slotMinTime, slotMaxTime, resource grouping |
| Working days | Uses the configured daysOfWeek set before width is calculated | daysOfWeek, showBusinessHours |
| Timeline | Owns horizontal scrolling for the time axis | timelineSlotWidth, timelineSlotDuration, timelineVirtualScroll |
| Resource timeline | Keeps the resource rail aligned with timeline lanes | resourceAreaWidth, rowAutoHeight, resource expansion |
| Agenda | Uses normal document flow and narrows naturally | agendaDays, agenda event UI |
#Scroll Ownership
Let Scheduler own the scroll containers that participate in drag, resize, keyboard movement, and overlay placement. Wrap the scheduler in a panel if needed, but avoid adding an extra horizontal scroller around Scheduler.Content.
| Need | Prefer |
|---|---|
| Fixed application panel | Set height on Scheduler.Root or the containing demo frame |
| Wide week or grouped columns | Allow Scheduler content to scroll horizontally |
| Long timeline range | Use timeline virtualization and tune slot width |
| Sticky resource labels | Use resource timeline instead of external sticky wrappers |
Avoid nested horizontal scrollbars around the Scheduler body. If a documentation panel, card, or app shell already scrolls horizontally, let Scheduler own the inner time-axis scroll and keep the outer wrapper width-constrained.
#Column Widths
Day and week columns keep a minimum usable width. Resource grouping multiplies the number of columns, so a grouped week can become wider than the viewport by design. That horizontal scroll is expected and keeps event cards readable.
| Pattern | Guidance |
|---|---|
| Simple week | Keep slotDuration and snapDuration readable before reducing density |
| Horizontal resources | Tune horizontalResourceDayMinWidth before compressing event cards |
| Date grouping | Tune horizontalResourceDayMinWidth and horizontalResourceMinColumnWidth so resource columns stay readable |
| Month overflow | Use the more popover instead of shrinking cards below readable size |
#Timeline
Timeline and resource timeline depend on timelineSlotWidth. Smaller values show more time at once but leave less room for labels and drag handles. Larger values improve readability but require more scrolling.
Use timelineVirtualScroll="auto" for long ranges or large resource sets. Keep rowAutoHeight on only when event stacks need natural row growth.
#Height
Set height when the Scheduler lives in a fixed application panel. Use autoHeight when the schedule should grow with its content and the page owns vertical scrolling.
| Situation | Prefer |
|---|---|
| Dashboard or split panel | Fixed height on Scheduler.Root |
| Documentation example | A frame height that leaves room for events |
| Resource timeline stacks | rowAutoHeight only when rows need to grow |
| Page-length agenda | Natural document flow |
#Mobile Guidance
Use agenda, day, or month as the primary small-screen entry point. Week, horizontal resource, and timeline views are still useful on mobile when horizontal scrolling is expected and the workflow needs comparison.
| Mobile task | Suggested view |
|---|---|
| Review upcoming items | Agenda |
| Book or inspect one day | Day or resource day |
| Scan a month | Month with more popover |
| Compare resources or long work | Timeline or resource timeline with clear scroll affordance |