Skip to content
RevoGrid [Pro]

Resource Leveling

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;
}

Enable deterministic auto-leveling with:

grid.gantt = {
  scheduling: {
    resourceLeveling: 'auto',
    resourceLevelingWithinSlack: false,
  },
};

Auto-leveling delays later overlapping automatic tasks until the resource is available, then reports resource-leveling-adjustment.

Leveling Controls

Section titled “Leveling Controls”

Per-task leveling controls:

const task = {
  priority: 900,           // 0-1000; higher priority is protected first
  canLevel: true,          // false keeps the task fixed during auto-leveling
  levelingDelayDays: 2,    // stored calendar-day delay applied by leveling
};

Deterministic auto-leveling order:

  1. Non-levelable tasks first (fixed blockers).
  2. Higher priority before lower priority.
  3. Earlier start date, then task id.

Constraints and Actuals

Section titled “Constraints and Actuals”

The leveling implementation avoids moving:

  • Manually scheduled tasks.
  • Tasks with actualStartDate or actualFinishDate.
  • Summary tasks.
  • Inactive tasks.
  • Tasks pinned by must-start-on or must-finish-on.