Scheduler for Touch Devices

On mobile and touch devices, the Scheduler supports the following actions out of the box:

• Event moving (moving is activated by press-and-hold gesture)

• Event click (tap)

• Time range selecting (tap to select a single cell or press-and-hold to start selecting multiple cells)

Event resizing is not mapped to any gesture. You can enable it by adding a custom icon using an event active area with action set to "ResizeEnd"  or "ResizeStart" (see an example below).

Supported Platforms

• iOS/iPadOS 12+ (iPhone, iPad)

• Android 10+ (smart phones, tablets)

Tutorial

• HTML5 Scheduler for Touch Devices - iPad, iPhone, Android (PHP, JavaScript)

Custom Event Resizing Touch Handle

This example displays an SVG icon (see event icons) at the right side of the Scheduler event box.

• The action is set to "ResizeEnd". This creates a resize handle (it works on both desktop and touch devices).

• The icon will be permanently visible. You can hide it on desktop devices (it will only appear on mouse hover) by adding visibility: "TouchVisible" to the active area properties.

JavaScript Example

onBeforeEventRender: args => {
  args.data.barHidden = true;
  args.data.backColor = "#6aa84f";
  args.data.fontColor = "#ffffff";
  args.data.borderColor = "darker";
  args.data.cssClass = "rounded";
  args.data.areas = [
    {
      right: 0,
      top: 6,
      height: 24,
      width: 24,
      symbol: "/assets/daypilot.svg#resize-right",
      fontColor: "#ffffff",
      action: "ResizeEnd"
    }
  ]
}

Custom Context Menu Touch Icon

JavaScript Example

contextMenu: new DayPilot.Menu({
  // ...
}),
onBeforeEventRender: args => {
  args.data.barHidden = true;
  args.data.backColor = "#6aa84f";
  args.data.fontColor = "#ffffff";
  args.data.borderColor = "darker";
  args.data.cssClass = "rounded";
  args.data.areas = [
    {
      right: 0,
      top: 6,
      height: 24,
      width: 24,
      symbol: "/assets/daypilot.svg#minichevron-down-4",
      fontColor: "#ffffff",
      action: "ContextMenu"
    }
  ]
}

Event "Tap-and-Hold" Gesture

By default, this gesture is mapped to activating event moving. As soon as the moving is activated the user can drag the event to a new position.

You can also switch the default action to a context menu using eventTapAndHoldHandling property.

The hold timeout is set to 300 ms. It can be customized using tapAndHoldTimeout property.

JavaScript Example

const scheduler = new DayPilot.Scheduler("scheduler", {
  tapAndHoldTimeout: 200,
  eventTapAndHoldHandling: "ContextMenu",
  contextMenu: new DayPilot.Menu({ /* ... */ }),
  // ...
});
scheduler.init();