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

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

• Angular Scheduler: Resource Management

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

• React Scheduler: How to Manage Resources