Features

  • JavaScript Scheduler component configured to display resource context menu on right click.
  • Hover context menu icon as a hint.
  • Allows implementing resource/row actions, such as Edit and Delete.
  • Simple HTML5/JavaScript project for download.
  • Includes a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Live Demo

Context Menu for JavaScript Scheduler Rows

javascript-scheduler-resource-context-menu-simple.png

The Scheduler includes built-in support for row header context menu. It lets you define custom actions. We will use this feature to add a simple context menu with three items:

  • Edit...
  • Delete
  • Add Child...

The context menu can be created using DayPilot.Menu class.

The DayPilot.Menu constructor accepts an options object that will let us define the context menu properties. We will use the items property to define the menu items. Our first context menu only has a single item ("Edit..."):

var menu = DayPilot.Menu({
items: [ { text: "Edit...", onClick: function(args) { var row = args.source; DayPilot.Modal.prompt("Resource name:", row.name).then(function(margs) { if (!margs.result) { return; } row.data.name = margs.result; dp.update(); }); } } ] });

The onClick callback defines the click event handler.

In order to link the menu to Scheduler row header items (which display resources) we need to assign the DayPilot.Menu instance to contextMenuResource property.

dp.contextMenuResource = new DayPilot.Menu({
  items: [
    {
      text: "Edit...",
      onClick: function(args) {
        var row = args.source;
        DayPilot.Modal.prompt("Resource name:", row.name).then(function(args) {
          if (!args.result) {
            return;
          }
          row.data.name = args.result;
          dp.update();
        });
      }
    },
    {
      text: "Delete",
      onClick: function(args) {
        var row = args.source;
        dp.rows.remove(row);
        dp.message("Deleted");
      }
    },
    {
      text: "-"
    },
    {
      text: "Add Child...",
      onClick: function(args) {
        var row = args.source;
        DayPilot.Modal.prompt("Resource name:", "New Resource").then(function(args) {
          if (!args.result) {
            return;
          }
          if (!row.data.children) {
            row.data.children = [];
            row.data.expanded = true;
          }
          row.data.children.push({
            name: args.result,
            id: DayPilot.guid()
          });
          dp.update();
        });
      }
    }
  ]
});

Context Menu Icon using Active Areas

javascript-scheduler-resource-context-menu-active-area.png

In order to provide an additional visual hint that a context menu is available we will add a hover icon to the row header using a row header active area.

The active area can be defined using onBeforeRowHeaderRender event handler:

dp.onBeforeRowHeaderRender = function(args) {
  args.row.areas = [
    {
      right: 2,
      top: 2,
      icon: "icon-triangle-down",
      style: "font-size: 12px; background-color: #f9f9f9; border: 1px solid #ccc; padding: 2px 2px 0px 2px; cursor: pointer;",
      visibility: "Hover",
      action: "ContextMenu"
    }
  ];
};

Activated the context menu:

javascript-scheduler-resource-context-menu-icon.png