javascript html5 scheduler touch ipad iphone android tablet

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

Custom Event Resizing Touch Handle

javascript html5 scheduler touch devices resizing

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 html5 scheduler touch devices context menu

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();