Row Header Customization

The resource (row) headers of the Scheduler component can be customized using the onBeforeRowHeaderRender event handler. This event is called once for every row (even when the rows are generated in Gantt or Timesheet mode).

It is possible to change the HTML, configure active areas, and set custom properties such as CSS class, background color, etc.

JavaScript Scheduler

The JavaScript Scheduler lets you customize the row headers using the onBeforeRowHeaderRender event:

• It is fired in real time whenever the row header is actually rendered.

• It can be fired repeatedly as the row headers are rendered progressively (and removed if you scroll them out of the viewport).

• You can access the row object here using args.row (DayPilot.Row).

• You can also access the related events using args.row.events.all() or args.row.events.forRange() methods and use this information to show dynamic data (e.g. availability).

Example Scheduler config:

{
  onBeforeRowHeaderRender: args => {
    args.row.backColor = "#e0e0e0";
    args.row.columns[0].text = args.row.data.description;
  }
}

Styling Row Headers using Custom CSS

You can apply custom CSS class to selected rows using onBeforeRowHeaderRender event handler.

CSS

<style>
  .row1 {
      color: white;
      background: red;
  }
</style>

JavaScript

dp.onBeforeRowHeaderRender = function(args) {
  args.row.cssClass = "row1";
};

Adding a Color Bar using Active Areas

Global CSS to make space for the bar (when row header width auto-fit is enabled):

<style>
    .scheduler_default_rowheader_inner
    {
        padding-right: 10px;
    }
</style>

Adding a bar using row header active areas:

dp.onBeforeRowHeaderRender = function(args) {
  var color = (args.row.index % 2) ? "#cc4125" : "#e69138";   // alternating colors
  args.row.areas = [
      { right: 2, top: 2, bottom: 2, width: 6, backColor: color }
  ];
};

When using row header columns, it's necessary to add the area to the column object:

dp.rowHeaderColumns = [
  { text: "Name", display: "name" },
  { text: "Capacity", display: "capacity" }
];
dp.onBeforeRowHeaderRender = function(args) {
  var color = (args.row.index % 2) ? "#cc4125" : "#e69138"; // alternating colors
  var last = args.row.columns.length - 1;
  args.row.columns[last].areas = [
    { right: 2, top: 2, bottom: 2, width: 6, backColor: color }
  ];
};

JavaScript Scheduler Tutorials

• JavaScript Scheduler: Using Checkboxes to Select Rows

Angular Scheduler

In the Angular Scheduler component, add a new onBeforeRowHeaderRender event handler to the config object:

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`,
  styles: [``]
})
export class TimesheetComponent implements AfterViewInit {

  config: DayPilot.SchedulerConfig = {
    rowHeaderColumns: [
      {title: "Name"},
      {title: "Details"}
    ],
    onBeforeRowHeaderRender: args => {
      args.row.columns[1].text = "Row details";
    },
  };

  // ...

}

Angular Scheduler Tutorial

• Angular Scheduler: Row Header Actions

• Angular Scheduler: Resource Management

• Angular Scheduler: Add Angular Components to Row Headers

Vue Scheduler

In the Vue Scheduler, there are two methods for customizing row headers:

1. Using the onBeforeRowHeaderRender Event Handler

2. Using Vue Templates

1. Using the onBeforeRowHeaderRender Event Handler

The onBeforeRowHeaderRender event is triggered before each row header is rendered. This event is called once per row, allowing you to modify the properties of the entire row (args.row) or individual cells if row header columns are enabled (args.row.columns).

Use Cases:

• Setting the background color (args.row.bacColor)

• Applying a CSS class (args.row.cssClass)

• Adjusting content alignment (args.row.verticalAlignment, args.row.horizontalAlignment)

• Defining active areas

• Modifying behavior (e.g., preventing row movement for specific rows)

<template>
  <DayPilotScheduler
    ...
    :events="events"
    :resources="resources"
    :rowHeaderColumns="[{ title: 'Name' }, { title: 'Details' }]"
    @beforeRowHeaderRender="onBeforeRowHeaderRender"
  />
</template>

<script setup>
import { DayPilotScheduler } from 'daypilot-pro-vue';
import { ref } from 'vue';

const events = ref([]);
const resources = ref([
  { id: 1, name: 'Resource 1', details: 'Detail A' },
  { id: 2, name: 'Resource 2', details: 'Detail B' },
]);

const onBeforeRowHeaderRender = (args) => {
  // Set the background color of the entire row
  args.row.backColor = "#e1ac63";

  // Modify the text of the second column, if it exists
  if (args.row.columns.length > 1) {
    args.row.columns[1].text = args.row.data.details || "Details...";
  }

  // Example: Prevent moving for a specific row
  if (args.row.data.id === 2) {
    args.row.moveDisabled = true;
  }
};
</script>

2. Using Vue Templates

To customize the row headers in the Vue Scheduler, you can define a Vue template and assign it to the #rowHeader slot. This template is applied to every row header cell.

The #rowHeader template receives an args object, which provides access to the row and column data:

• row: Represents the current row as a DayPilot.Row object. This object contains all the properties and data associated with the row.

• x: Indicates the column index, specifying which row header column is being rendered. This is useful when you have multiple row header columns and need to define content for the additional columns.

In the template, you can access the original row data (from resources) using args.row.data.

<template>
  <DayPilotScheduler
    ...
    :events="events"
    :resources="resources"
    :rowHeaderColumns="rowHeaderColumns"
    @timeRangeSelected="onTimeRangeSelected"
    @beforeEventRender="onBeforeEventRender"
  >
    <template #rowHeader="{ row, x }">
      <div class="custom-row-header">
        <!-- First Column: Resource Name -->
        <template v-if="x === 0">
          <strong>{{ row.name }}</strong>
        </template>

        <!-- Second Column: Custom Description -->
        <template v-else-if="x === 1">
          <em>{{ row.data.description }}</em>
        </template>
      </div>
    </template>

  </DayPilotScheduler>
</template>

<script setup>
import { ref } from 'vue';
import { DayPilotScheduler, DayPilot } from 'daypilot-pro-vue';

// Sample event data
const events = ref([]);

// Sample resource data with a custom description field
const resources = ref([
  { id: 1, name: 'Resource 1', description: 'Description for Resource 1' },
  { id: 2, name: 'Resource 2', description: 'Description for Resource 2' },
]);

const rowHeaderColumns = ref([
  { title: 'Name' },
  { title: 'Description' },
]);

</script>

Vue Scheduler Tutorial

See the Vue Scheduler: Row Header Templates tutorial that shows how to add icons, badges and interactive content to the Vue Scheduler row headers:

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  if (e.Id == "E")
  {
    e.BackgroundColor = "green";
  }
}

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  if (e.Id == "E")
  {
    e.CssClass = "my-row";
  }
}

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  string encodedName = System.Web.HttpUtility.HtmlEncode(e.Name);
  e.Html = String.Format("<a href='Resource.aspx?id={0}'>{1}</a>", e.Id, encodedName);
}

protected override void OnBeforeResHeaderRender(BeforeResHeaderRenderArgs e)
{
  if (Id == "dps_areas")
  {
      e.Areas.Add(new Area().Width(17).Bottom(1).Right(0).Top(0).CssClass("resource_action_menu").Html("<div><div></div></div>").JavaScript("alert(e.Value);"));
  }

  if (e.Columns.Count > 0)
  {
      e.Columns[0].Html = "10 seats";
  }
}