html5 javascript scheduler row creation

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).

html5 javascript scheduler add new row

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.



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



This TypeScript example enables the new row feature in the Angular Scheduler component. You can override the default placeholder text using rowCreateText property.

import {Component, ViewChild, AfterViewInit, ChangeDetectorRef} from "@angular/core";
import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";

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

  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;

  config: DayPilot.SchedulerConfig = {
    // ...

    rowCreateHandling: "Enabled",
    rowCreateText: "New group...",
    onRowCreate: args => {
      // the new groups is added when the HTTP backend call is successful
      this.ds.createResource(null, args.text).subscribe(result => {



Angular Tutorials


The following React example shows how to use the built-in row creation support in the React Scheduler component.

It adds the new row to the bottom of the top level of the resource tree. It uses a locally-generated ID for the new resource for demonstration purposes.

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

class Scheduler extends Component {

  constructor(props) {

    this.state = {

      rowCreateHandling: "Enabled",
      rowCreateText: "New group...",
      onRowCreate: args => {

        const row = {
          name: args.text,
          id: DayPilot.guid()

      // ...

  render() {
    var {...config} = this.state;
    return (
          ref={component => {
            this.scheduler = component && component.control;

export default Scheduler;

React Tutorials