Resources and Assignments

Source code

TypeScript ts

import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
import { loadAdvancedGanttDemo } from './GanttAdvancedVanillaDemo';

export function load(parentSelector: string) {
  return loadAdvancedGanttDemo(parentSelector, GANTT_RESOURCE_PLANNING_DEMO);
}

Vue vue

<template>
  <GanttAdvancedDemo :demo="GANTT_RESOURCE_PLANNING_DEMO" />
</template>

<script setup lang="ts">
import GanttAdvancedDemo from './GanttAdvancedDemo.vue';
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
</script>

React tsx

import React from 'react';
import GanttAdvancedDemo from './GanttAdvancedReactDemo';
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';

export default function GanttResourcePlanning() {
  return <GanttAdvancedDemo demo={GANTT_RESOURCE_PLANNING_DEMO} />;
}

Angular ts

import { Component, NO_ERRORS_SCHEMA, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { GanttAdvancedAngularBase } from './GanttAdvancedAngularBase';
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';

@Component({
  selector: 'gantt-resource-planning-grid',
  standalone: true,
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
  imports: [RevoGrid],
  template: `
    <div style="height: 560px; display: flex; flex-direction: column; gap: 8px">
      <div style="display: flex; gap: 8px">
        <button type="button" (click)="setLevelingMode('warn')">Warn</button>
        <button type="button" (click)="setLevelingMode('auto')">Auto level</button>
      </div>
      <div style="display: flex; gap: 8px">
        <button type="button" (click)="setResourcePlanningEnabled(false)">Task view</button>
        <button type="button" (click)="setResourcePlanningEnabled(true)">Resource load</button>
      </div>
      <revo-grid style="height: 100%" [theme]="theme" [hideAttribution]="true" [plugins]="plugins" [source]="tasks" [columns]="columns" [gantt]="ganttConfig" [ganttDependencies]="dependencies" [ganttCalendars]="calendars" [ganttResources]="resources" [ganttAssignments]="assignments"></revo-grid>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class GanttResourcePlanningGridComponent extends GanttAdvancedAngularBase {
  protected readonly demo = GANTT_RESOURCE_PLANNING_DEMO;
}

Resources define the people, equipment, or facilities that perform work on your tasks. Assignments connect these resources to specific tasks with defined allocation units and work hours.

Data Model

Resources and assignments are managed through two distinct collections:

grid.ganttResources = [{
  id: 'alex',
  name: 'Alex',
  role: 'Engineer',
  calendarId: 'cal-standard',
  allocationCapacity: 100, // 100% capacity
  hourlyCost: 120,
}];

grid.ganttAssignments = [{
  id: 'assign-1',
  taskId: 'task-1',
  resourceId: 'alex',
  allocationUnits: 100, // 100% assignment
  workHours: 40,
  responsibility: 'Owner',
}];

Capacity and Units

allocationCapacity and allocationUnits accept either a percent scale (100) or a decimal scale (1.0) for full capacity. The scheduling engine uses these values to calculate resource load and identify over-allocations.

Resource Over-Allocation

When the resourceLeveling policy is set to 'warn', the scheduler calculates allocation by resource and working date. If assigned units exceed the resource’s capacity on any given day, it reports a resource-overallocation conflict.

grid.gantt = {
  scheduling: { resourceLeveling: 'warn' },
};

Example: Over-Allocation Warning

If one resource is assigned to multiple overlapping tasks at 100% each, a warning will be triggered:

grid.ganttResources = [{
  id: 'alex',
  name: 'Alex',
  allocationCapacity: 100,
}];

grid.ganttAssignments = [
  { taskId: 'build', resourceId: 'alex', allocationUnits: 100 },
  { taskId: 'docs', resourceId: 'alex', allocationUnits: 100 },
];

Expected result: On days where build and docs overlap, Alex is allocated at 200%. Each affected task receives a resource-overallocation warning in the grid and on the timeline.

---

Next Steps

• Resource Planning View: Visualize resource load on a dedicated timeline.
• Resource Leveling: Automatically resolve over-allocations by delaying tasks.
• Effort Modes: Control how assignments affect task duration.