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

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

Supported Platforms

  • iOS 6+ (iPad, iPhone, iPod Touch)
  • Android 4+

Supported Devices

  • smart phones
  • tablets

A permanently visible event active area can be used to activate an event context menu and to add a custom event drag handler.


Adding Active Areas for Event Resizing


JavaScript Example

dp.onBeforeEventRender = function(args) { = ""; // hide the default text and display it using a special active area at a shifted position = [
        {left:2, top:6, bottom:2, width: 20, backColor: "lightblue", html: "<", action:"ResizeStart"},
        {left:26, top: 6, bottom: 2, right: 26, html: },
        {right:2, top:6, bottom:2, width: 20, backColor: "lightblue", html: ">", action:"ResizeEnd"},

Adding an Active Area for Context Menu


JavaScript Example

dp.onBeforeEventRender = function(args) { = [
      {right:2, top:6, bottom:2, width: 20, html: "...", 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

var dp = new DayPilot.Scheduler("dp");
// ...
dp.tapAndHoldTimeout = 200; dp.eventTapAndHoldHandling = "ContextMenu";
dp.contextMenu = new DayPilot.Menu( { /* ... */ } );