Row Editing

The Scheduler component supports inline editing of row header headers. You can use this feature to let users edit the resource name and/or resource properties that are displayed in additional columns.

Activating the Edit Mode

1. You can set the click event to trigger the inline editing mode:

rowClickHandling: "Edit"

2. You can also use the double-click event:

rowDoubleClickHandling: "Edit"

3. To start the editing programmatically, use the rows.edit() method:

const row = scheduler.rows.find("A");
scheduler.rows.edit(row);

Editing

Users can confirm the new value by pressing <enter> or by clicking outside of the active cell.

Pressing <esc> will cancel the editing without changing the value.

After the editing ends, the Scheduler fires onRowEdit and onRowEdited event handlers. You can use them to save the new value to the database.

onRowEdited: async (args) => {
  if (args.canceled) {
    return;
  }
  const params = {
    row: args.row.id,
    property: (scheduler.rowHeaderColumns?.[args.x]?.display || "name"),
    value: args.newText
  };
  try { await DayPilot.Http.post('/resource/update', params); }
  catch { await DayPilot.Modal.alert('Saving failed; the local edit is still visible.'); }
}

Row Header Columns

When your Scheduler component displays custom row header columns, you can also edit the additional row header cells. This feature is available since version 2023.1.5513 (in previous version, only the name in the first column was supported).

The index of the column that was edited is available as args.x in onRowEdit and onRowEdited handlers.

When activating the edit mode using rows.edit(), you can specify the column using the second argument:

const row = scheduler.rows.find("C");
scheduler.rows.edit(row, 1);

Live Demo

• JavaScript Scheduler Inline Row Editing Demo

JavaScript Scheduler

This example shows how to map inline event editing to a row header click event in the JavaScript Scheduler.

const scheduler = new DayPilot.Scheduler("dp", {
  rowClickHandling: "Edit",
  onRowEdited: (args) => {
    scheduler.message("Row text changed to " + args.newText);
  }
});
scheduler.init();

API: rowDoubleClickHandling.

The examples set rowDoubleClickHandling to Edit. Double-click a resource header to rename it locally, and use the editing callbacks described above to persist accepted changes.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    rowDoubleClickHandling: "Edit"
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      rowDoubleClickHandling={"Edit"}
    />
  </div>;
}

Vue

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

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const rowDoubleClickHandling = "Edit";

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :rowDoubleClickHandling="rowDoubleClickHandling"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler 
  ...
  RowClickHandling="Edit" 
  RowEditHandling="CallBack"
  OnRowEdit="DayPilotScheduler1_OnRowEdit"
  ...
  />

protected void DayPilotScheduler1_OnRowEdit(object sender, RowEditEventArgs e)
{
  e.Resource.Name = e.NewText;
  setDataSourceAndBind();
  DayPilotScheduler1.UpdateWithMessage("Resource name changed to : " + e.NewText);
}

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = Url.Action("Backend", "Scheduler"),
  // ...
  RowClickHandling = RowClickHandlingType.Edit,
  RowEditHandling = RowEditHandlingType.CallBack
})

protected override void OnRowEdit(RowEditArgs e)
{
  e.Resource.Name = e.NewText;
  Update(CallBackUpdateType.Full);
}