Overview

  • This tutorial shows how to create a queue of tasks scheduled for a specific day, without setting the time of day and the assigned resource (person, location, etc.).

  • Users can assign the time of day and resource by dragging the task from the queue to the main Scheduler grid.

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

How to Display a Special Row for Queued Tasks

javascript scheduler queue row

We will display a special frozen row at the top of the JavaScript Scheduler component. This row will display a queue of tasks scheduled for a given day (without a precise time slot). Users will be able to use drag and drop to move the tasks to the grid and assign the specified time and resource.

dp.resources = [
  {name: "Queue", id: "QUEUE", frozen: "top", marginBottom: 25},
  {name: "Resource 1", id: "R1"},
  {name: "Resource 2", id: "R2"},
  {name: "Resource 3", id: "R3"},
  {name: "Resource 4", id: "R4"},
  {name: "Resource 5", id: "R5"},
  {name: "Resource 6", id: "R6"},
  {name: "Resource 7", id: "R7"},
  {name: "Resource 8", id: "R8"},
  {name: "Resource 9", id: "R9"},
];

How to Remove Vertical Lines from the Queue Row

javascript scheduler queue row vertical lines

To display one big cell for each day in the queue, we will remove the vertical lines that separate the grid cells from the queue row. This can be done using the following CSS:

<style>
  .scheduler_default_grid_top .scheduler_default_matrix_vertical_line {
    display: none;
  }
</style>

Adjust Time Range Selecting for the Queue

javascript scheduler queue event restrictions

A custom onTimeRangeSelecting handler will adjust the start and end time of a new event created using drag and drop in the queue row. The task will always fill the whole day:

onTimeRangeSelecting: args => {
  if (args.resource === "QUEUE") {
    args.start = args.start.getDatePart().addHours(dp.businessBeginsHour);
    args.end = args.start.getDatePart().addHours(dp.businessEndsHour).addHours();
  }
},

Icon for Adding Tasks to Queue

javascript scheduler queue row add icon

We will use onBeforeCellRender event handler to display an icon for adding a new task to the queue.

onBeforeCellRender: args => {
  if (args.cell.resource === "QUEUE" && args.cell.start.getHours() === 13) {
    args.cell.areas = [
      {
        left: 2,
        bottom: 2,
        height: 20,
        right: 2,
        style: "cursor: pointer;",
        cssClass: "icon-add",
        symbol: "daypilot.svg#plus-4",
        toolTip: "Add unscheduled task",
        onClick: async args => {
          const modal = await DayPilot.Modal.prompt("Name", "Task");
          if (modal.canceled) {
            return;
          }
          dp.events.add({
            start: args.source.start.getDatePart().addHours(dp.businessBeginsHour),
            end: args.source.start.getDatePart().addHours(dp.businessEndsHour).addHours(1),
            text: modal.result,
            id: DayPilot.guid(),
            resource: "QUEUE"
          });
        },
        action: "None"
      }
    ];
  }
},

Moving Events between the Queue and the Scheduler Grid using Drag and Drop

javascript scheduler daily queue drag drop

We need to use custom moving logic to adjust the start and end time of the task when moving it between the queue and the main Scheduler grid:

onEventMoving: args => {
  if (args.e.resource() === "QUEUE") {
    const coords = dp.getCoords();
    args.start = coords.cell.start;
    args.end = coords.cell.end;
  }
  if (args.resource === "QUEUE") {
    args.start = args.start.getDatePart().addHours(dp.businessBeginsHour);
    args.end = args.start.getDatePart().addHours(dp.businessEndsHour).addHours(1);
  }
},