javascript scheduler inline row editing angular react vue

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 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: dp.rowHeaderColumns[args.x].display,
    value: args.newText
  };
  const {data} = await DayPilot.Http.post('/resource/update', params);
}

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

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();

Angular Scheduler

In the Angular Scheduler component, you can define the onRowEdited event handler using the config object:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

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

  config: DayPilot.SchedulerConfig = {
    rowClickHandling: "Edit",
    onRowEdited: args => {
      console.log("Row updated", args);
    }
    // ...
  };

}

React Scheduler

You can use the rowClickHandling and onRowEdited attributes of the React Scheduler component to enable the inline row editing feature.

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

function Scheduler() {

  function onRowEdited(args) {
    console.log("Row updated", args);
  }

  return (
    <div>
      <DayPilotScheduler
        rowClickHandling={"Edit"}
        onRowEdited={onRowEdited}
      />
    </div>
  );

}

export default Scheduler;

Vue Scheduler

In the Vue Scheduler component, use the rowClickHandling and onRowEdited properties of the config object.

<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

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

const config = {
  rowClickHandling: "Edit",
  onRowEdited: args => {
    console.log("Row updated", args);
  },
  // ...
};

</script>

ASP.NET WebForms

asp.net scheduler inline row editing

.aspx

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

.aspx.cs

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

Demo

ASP.NET MVC

scheduler for asp.net mvc row editing

MVC View

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

MVC Controller

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

Demo