Row Creating

Users can add a new resource using a special row displayed at the bottom of the Scheduler component.

By default, this feature is turned off. You can enable it using rowCreateHandling property (use "Enabled" value).

When the user clicks the last row it will turn into an editable field. When the new name is entered and confirmed (<enter> or lost focus), the Scheduler fires onRowCreate event. Pressing <escape> will cancel the action.

JavaScript

Example

dp.rowCreateHandling = "Enabled";
dp.onRowCreate = function(args) {
  dp.resources.push({
      id: DayPilot.guid(),
      name: args.text
  });
  dp.update();
};

Demo

• Scheduler Row Creating Demo

API: rowCreateHandling, onRowCreate.

Enter a room name in the new-row placeholder and press Enter. The examples add a local resource with a generated ID using rows.add(); add persistence when connecting them to your application.

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

Angular

The onRowCreate config callback uses this.scheduler.control, obtained through @ViewChild.

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  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"}],
    rowCreateHandling: "Enabled",
    onRowCreate: args => { this.scheduler.control.rows.add({id: DayPilot.guid(), name: args.text}); }
  };

}

Angular Tutorials

• Angular Scheduler: Resource Management

React

Capture the Scheduler API with controlRef. The onRowCreate prop calls rows.add() through that ref.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);

  return <div>

    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      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"}]}
      rowCreateHandling={"Enabled"}
      onRowCreate={args => { scheduler.current.rows.add({id: DayPilot.guid(), name: args.text}); }}
    />
  </div>;
}

React Tutorials

• React Scheduler: How to Manage Resources

Vue

Bind the handler using :onRowCreate and access the row API through scheduler.value.control.

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

const scheduler = ref(null);
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 rowCreateHandling = "Enabled";
const onRowCreate = args => { scheduler.value.control.rows.add({id: DayPilot.guid(), name: args.text}); };

</script>

<template>
  <div>

    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :rowCreateHandling="rowCreateHandling"
      :onRowCreate="onRowCreate"
    />
  </div>
</template>