How to get id of newly created event?

You need to return the ID of the new event from the server after saving the new record in the database. Then you can add the event to the Scheduler using events.add(). Please take a look at the following tutorial:

https://code.daypilot.org/87166/html5-scheduler

dp.onTimeRangeSelected = function (args) {
  var form = [
    {name: "Text", id: "text"},
    {name: "Start", id: "start", dateFormat: "M/d/yyyy h:mm:ss tt"},
    {name: "End", id: "end", dateFormat: "M/d/yyyy h:mm:ss tt"},
    {name: "Resource", id: "resource", options: flatten(dp.resources)}
  ];

  var data = {
    start: args.start,
    end: args.end,
    resource: args.resource,
    text: "New event"
  };

  var options = {
    focus: "text"
  };

  DayPilot.Modal.form(form, data, options).then(function(modal) {
    dp.clearSelection();
    if (modal.canceled) {
      return;
    }
    DayPilot.Http.ajax({
      url: "backend_create.php",
      data: modal.result,
      success: function(response) {
        var e = {
          id: response.data.id,
          start: modal.result.start,
          end: modal.result.end,
          text: modal.result.text,
          resource: modal.result.resource
        };
        dp.events.add(e);
        dp.message("Created.");
      }
    });
  });

};

Hi Dan,
Returning the correct ID for the event saved in the backend DB is the issue. If I create an event and want to delete, resize or move, I can't do it right away. I need to refresh the DP table first so that the resources and events array are built again so I can read and get the ID of that event.

This will cause a huge performance hit as every time I am creating an event I have to refresh the DP table. Sorry if I am not clear but please let me know if there is anything I can do to avoid this.

> If I create an event and want to delete, resize or move, I can't do it right away.

Yes, you can, if you use the code above. In that case, the event will be created with the correct id.

Thank you for your swift replies.. I am able to get ID of the event created from my database in the ajax success function and assign it to the event. But when I call the dp.events.add(e), the event box doesn't appear. If I refresh the DP then it would come up. Below is my ajax call:

$.ajax({
  url:
    _spPageContextInfo.webAbsoluteUrl +
    "/_api/web/lists/getbytitle('" +
    listName +
    "')/items",
  type: "POST",
  contentType: "application/json;odata=verbose",
  data: JSON.stringify(itemProperties),
  headers: {
    Accept: "application/json;odata=verbose",
    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  },
  success: function (data) {
    var ce = new DayPilot.Event({
      start: itemProperties.StartDate,
      end: itemProperties.EndDate,
      id: data.d.ID,
      resource: itemProperties.ResourceId,
      text: itemProperties.Allocation,
    });
    dp.events.add(ce);
  },
  error: function (data) {
    alert("Error creating record");
  },
});

You should print the "ce" object to console before adding it to the Scheduler to see if the data values are what you expect:

console.log("event data", ce.data);

Note that the resource ID must match exactly, including type, i.e. 3 !== "3".