html5-javascript-scheduler-row-creation.png

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

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

Angular

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";

@Component({
  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 => {
        this.config.resources.push(result);
        this.scheduler.control.message("Created.");
      });
    },

  };

}

Angular Tutorials

React

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) {
    super(props);

    this.state = {

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

        const row = {
          name: args.text,
          id: DayPilot.guid()
        }
        this.scheduler.rows.add(row);

      },
      
      // ...
    };
  }


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

export default Scheduler;

React Tutorials