Touch Support in dhtmlxScheduler

dhtmlxScheduler provides support for touch devices, such as:

  • iOS devices (iPad, iPhone, iPod);
  • Windows 8-based tablets and touch screen monitors;
  • Android-based devices.

Technically, the scheduler will work on the latest smartphones as well, but due to the lack of screen space it still isn't a good idea.

Important tips!

  • Touch support is enabled by default and provided in all modes of the scheduler.
  • If your app is intended to be used on the touch devices, we strongly recommend to use the 'dhx_terrace' skin, as it provides reasonably big and easy-to-touch buttons.
  • We recommend to add the meta tag on the page. It'll protect you from zooming on a touch device.
<meta name="viewport" content="width=device-width, initial-scale=1">

To start using the extension, include the ext/dhtmlxscheduler_quick_info.js file on the page.

Touch configuration options

  • touch - enables/disables the touch support in the scheduler
  • touch_drag - defines the time period in milliseconds that is used to differentiate the long touch gesture from the scroll gesture
  • touch_tip - enables/disables prompting messages in the right top corner of the screen

Touch gestures in the scheduler

  • Double tap - works the same as double click in the normal scheduler (triggers event edition or creation);
  • Long tap and drag - moves or creates events;
  • Swipe - switches view to the next|prev time span.

'Quick info' extension

Specially for providing touch functionality, the library is extended with the "Quick Info" extension.

The extension allows you to replace the standard sidebar buttons and the simplified edit form (which are quite small and hard-to-target on touch devices) with new ones, bigger and handier.

To activate the big-buttons scheduler, include the "Quick Info" extension file on the page:

<script src="../../codebase/ext/dhtmlxscheduler_quick_info.js"></script>
<script>
      scheduler.init('scheduler_here',new Date(2019,5,30),"day");
      ...
<script>

Related sample:  Touch-oriented scheduler

Once the extension is enabled, the scheduler automatically replaces standard buttons with large-size ones:

quick_info_extension.png

Note, the quick-info selection side menu and selection menu in the standard scheduler use the same configuration that is stored in the icons_select object.

The extension provides:

  • 3 templates
  • 1 configuration option
  • quick_info_detached - defines whether the event form will appear from the left/right side of the screen or near the selected event
  • 2 methods
  • hideQuickInfo - hides the pop-up event form (if it's currently active)
  • showQuickInfo - displays the pop-up event form for the specified event
  • 2 events
Back to top