html5-scheduler-touch.png

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.

Tutorial

Adding Active Areas for Event Resizing

html5-scheduler-mobile-touch-devices-resizing.png

JavaScript Example

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

Adding an Active Area for Context Menu

html5-scheduler-mobile-touch-context-menu.png

JavaScript Example

dp.onBeforeEventRender = function(args) {
  args.data.areas = [
      {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( { /* ... */ } );
dp.init();