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

API: onBeforeEventRender.

The framework examples add a permanently visible area at the right edge of each event with action: "ResizeEnd". Dragging this handle changes the event end on touch devices as well as with a mouse.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    onBeforeEventRender: args => { args.data.areas = [{right: 0, top: 0, bottom: 0, width: 24, text: "↔", action: "ResizeEnd", backColor: "#dddddd"}]; }
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      onBeforeEventRender={args => { args.data.areas = [{right: 0, top: 0, bottom: 0, width: 24, text: "↔", action: "ResizeEnd", backColor: "#dddddd"}]; }}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const onBeforeEventRender = args => { args.data.areas = [{right: 0, top: 0, bottom: 0, width: 24, text: "↔", action: "ResizeEnd", backColor: "#dddddd"}]; };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onBeforeEventRender="onBeforeEventRender"
    />
  </div>
</template>