Scheduler - Resource UI

Customize resource headers, rows, groups, columns, and aggregate badges.

#Resource Options

view selects the resource timeline surface that owns these outlets. Resource timeline values include resourceTimelineDay, resourceTimelineWeek, and resourceTimelineMonth.

const view = 'resourceTimelineWeek';
const resourceAreaWidth = '18rem';

resourceAreaWidth accepts a number of pixels or a CSS size string, such as '18rem', when row labels and aggregate badges need more rail width.

#Choose a Surface

Resource customization appears in several layouts. Pick the outlet that owns the label or summary you want to replace.

  • Scheduler.ResourceHeader: Labels the resource timeline rail and resource-aware views, or summarizes the visible resource set.
  • Scheduler.ResourceAreaHeader: Renders the header above the resource rail. Use it for a rail label, count, filter status, or grouped-resource summary.
  • Scheduler.ResourceRow: Renders leaf rows in a resource timeline. Use it for people, rooms, equipment, queues, or capacity labels.
  • Scheduler.ResourceGroup: Renders parent rows in resource hierarchies. Use it for collapsible group labels with counts or status.
  • Scheduler.ResourceAggregateBadge: Renders collapsed resource-group summaries. Use it to show hidden child event totals without expanding the tree.
  • Scheduler.ResourceColumnHeader: Renders horizontal resource columns and resource month headers. Use it for resource-owned labels above a grid.

Use row and group outlets for vertical resource rails. Use column headers for horizontal resource grouping. Use aggregate badges only when collapsed parent rows need a hidden-event summary.

#Small Override

Start with a resource row or group component and keep the runtime identity on Scheduler data.

<Scheduler.Content>
    <Scheduler.ResourceTimeline>
        <Scheduler.ResourceRow>
            <TeamResourceRow />
        </Scheduler.ResourceRow>
        <Scheduler.ResourceGroup>
            <TeamResourceRow group />
        </Scheduler.ResourceGroup>
    </Scheduler.ResourceTimeline>
</Scheduler.Content>

Reusable components can read the row context and call the Scheduler-provided toggle.

<script setup lang="ts">
import { computed } from 'vue';
import { useSchedulerResourceRowContext } from '@primeui/vue-scheduler';

const row = useSchedulerResourceRowContext();
const load = computed(() => row.value.resource.metadata?.load ?? 'Open');
</script>

<template>
    <button type="button" class="resource-row" @click="row.toggle">
        <span>{{ row.title }}</span>
        <small>{{ load }}</small>
    </button>
</template>

Use user-select: none on clickable row or group labels so expansion gestures do not select text. Keep buttons or click targets large enough for the rail width, especially when resourceAreaWidth is narrow.

#Resource Parts

PrimeOne resource parts can render hierarchy, lane rows, and aggregate badges in a resource timeline.

Loading Demo...

#Context

Resource hooks mirror the outlet that renders them.

  • Header context reads the rail label, active view, and visible resource count.
  • Row context reads leaf resource data, title, depth, expanded state, and toggle.
  • Group context reads parent resource data, title, depth, expanded state, and toggle.
  • Aggregate badge context reads the collapsed parent resource and aggregate event count.
  • Column header context reads the resource, date, and column metadata for horizontal resource columns.

Parent resources and leaf resources should not be treated the same unless the UI is intentionally flat. Parent rows need a clear expand/collapse affordance, aggregate count, and indentation. Leaf rows need stable identity and enough width for labels that line up with timeline lanes.

#Advanced Example

Customize resource rows, headers, column headers, and aggregate badges with application-owned markup. The resource model still drives row identity, hierarchy state, and layout sync.

Loading Demo...

#Checklist

  • Keep resource.id stable. Drag, drop, event matching, and collapsed state depend on identity.
  • Preserve toggle for parent rows and groups instead of maintaining separate expansion state.
  • Match row height and resource rail width to the amount of metadata shown.
  • Keep resource timeline rows aligned with event lanes after adding badges or secondary text.
  • Use Scheduler.ResourceColumnHeader for horizontal resource columns, not row components.
  • Keep collapsed aggregate badges readable and compact so they do not push row labels out of alignment.
  • Avoid text selection on clickable rows and groups.

#API

Resource UI relies on resources, resourceAreaWidth, resourcesExpandable, resourcesInitiallyExpanded, showAggregatedEvents, rowAutoHeight, resource child outlets, and resource context hooks.