[beta] Scheduler 3.7 - support for touch devices

Scheduler Javascript
#1

[size=150]Touch support[/size]

The next version of the scheduler - dhtmlxScheduler 3.7 - adds the long-awaited touch functionality to the component. Now the default edition of dhtmlxScheduler will be able to work on touch devices, such as Android, iOS, Blackbery and Windows 8 tablets and touch screen monitors ( technically, it can work on the latest smartphones as well, but due to the lack of screen space it’s still not a good idea).

Touch support is enabled by default and provided in all modes of the scheduler. So, you just need to update .js and .css files, no any extra configuration required. In all views:

  • Double tab will work the same as double click in the normal scheduler ( can trigger event edition or creation );
  • Long tap and drag can be used to move or create events.
  • Swipe action switches view to next|prev timespan

If you are targeting touch devices, we strongly recommend usage of “dhx_terrace” skin as it provides reasonably big and easy-to-touch buttons. Also, version 3.7 includes the “Quick Info” extension which can be used as the replacement for “sidebar buttons” which are quite small and hard-to-target on touch devices.

You can use samples/01_initialization_loading/13_touch_ui.html as a reference.

[size=150]Touch detection[/size]

Touch detection is based on useragent strings and if it doesn’t work on your device, try to add the next config line:

scheduler.config.touch = “force”;

If the above works - please, provide useragent string from the problematic device ( it will help to extend touch detection logic in the final version ).

If it still doesn’t work on your touch device - please, provide the device name and its useragent string.

[size=150]Other changes[/size]

Version 3.7 contains few other fixes:

  • incorrect resize operation when rounding the event size;
  • scheduler can’t be inited without at least one tab inside;
  • incorrect cursor when resizing is disabled;
  • locate_timeline_scale does’t work with html in scale_label;
  • incompatibility between recurring and collision extensions;
  • config.now_date was not applied to all views.
  • Romanian locale added
    scheduler_37_190209.zip (889 KB)
#2

I tried to test the Touch UI sample in Internet Explorer 9, and found that when I double-click on an existing event, I get a new style of lightbox, but when I double click to start a new event I get the old version of the lightbox.

Also the positioning of the lightbox is completely wrong if I click on an existing event - it’s going either completely to the left or completely to the right.

Positioning of the lightbox for a new event is correctly centered.

I will report any further issues that I discover.

#3

Ah, I understand - what I thought was a new lightbox is the replacement for the Quick Icons. I think it needs some different positioning algorithm.

#4

All-day events do not bring up the new “Quick Info” box. They need a double-click to bring up the old lightbox, and never show the new “Quick Info” box.

#5

I think you need to give us the ability to alter the size of the lightbox.

On my 7inch Android tablet in portrait mode, the lightbox is too large to fit on screen. If I rotate the device, the screen is large enough to show the whole lightbox, but the lightbox does not correctly reposition itself - part of the lightbox is off the side of the screen.

If the tablet is in landscape mode BEFORE the lightbox is displayed, then it is OK for size.

#6

Are you expecting swipe events to work in this beta version?

I tried to detect a swipe by the following
scheduler.attachEvent(“onSwipeX”,scrollCurrentView);
but it did not call my event handler function.

I also tried
scheduler.attachEvent(“onSwipe”,scrollCurrentView);
but that did not work either

#7

(a) There is only one lightbox and it was not changed, extension replaces side menu, which appears on side of event, when you are dbl-clicking in normal scheduler it shows side menu ( after first click ) and shows lightbox after second. With new extension situation is similar, just instead of side menu, is shows quick-info-sidebar

(b) Problem with all-day events confirmed

© As for sizes - it fits correctly on 7inch tablet with landscape orientation. In case of vertical orientation - not so good. We will check how size can be made adjustable

(d) What do you expect from swipe events? Change to next and prev time period ?

#8

Yes, I realised after my original post that what I was seeing was the replacement for the “side menu”

There is a problem with positioning of it. It displays either completely left or completely right, rather than adjacent to the event as the “side menu” would do.

Would be very good if you could make it adjustable.

Yes, for next/prev.

Touch device users would be expecting to use such gestures.

I’ve customised my copy of the mobile scheduler to work that way using some code that Alexandra provided in this thread.

Swipe Support

It works very well in the mobile scheduler.

#9

A couple of screenshots to show how the Quick Info box gets incorrectly positioned

dhtmlxtouch2.png1308×605 21.2 KB


dhtmlxtouch1.png1300×602 19.8 KB

#10

Build updated

  • swipe navigation added
  • quick info can be switched to detached mode ( check samples/01_initialization_loading/13_touch_ui.html )
#11

Thanks for the update.

I can confirm that full-day events now bring up the “Quick Info” the same as normal events.

The setting of

scheduler.config.quick_info_detached = true;

allows the “Quick Info” to appear next to the actual event, which is much better.

I would have thought that this should be the default behaviour, and I struggle to understand a reason for having the other mode of operation where the “Quick Info” appears at the side of the screen.

Also, I think that this should probably have been called quick_info_attached rather than quick_info_detached.

#12

There seems to be some debug code left in this version as when you do a swipe a message “Drag to create” appears at the top left, and you need to tap the screen to get the swipe action to be implemented.

Also I believe the swipe action is working in the wrong directions.

For example, in Day Mode, when on 8th February and you swipe your finger to the right, the scheduler is advancing to 9th February (as though you had presses the right arrow button) but really it is more logical that the 8th February MOVES to the right and so the 7th February should be shown.

#13

There may be some issue with opening the “Quick Info” window in the Month View as I am having events where the “Quick Info” is not appearing. The event for 15:00 Cirque du Soliel Varekai on Thursday 7th seems to be having this problem BUT the message “Drag to create” is keep appearing so I can’t confirm if this is a real problem or something related to debug code left in this version.

#14

Build updates, issue with debug messages must be resolved now.
As for swiping, it looks correct for me. When you are swiping from right to left - you are navigation to future. ( like moving current view to left, and dragging in the next view )

Unfortunately swipe will not work for android webkit ( will work for android firefox browser ) because of active bug in webkit engine

code.google.com/p/android/issues/detail?id=19827

#15

Thank you. I will check build scheduler_37_130209 and let you know.

In build scheduler_37_130208 swipe works the opposite to what you describe. I will recheck in build scheduler_37_130209 and let you know.

Swipe is working for me in both my Android tablets using build scheduler_37_130208. I will advise once I have tested it with build scheduler_37_130209.

#16

I can confirm that the debug messages are gone with build scheduler_37_130209.

Swipe stills requires a touch after the swipe before the swipe action is implemented.

Swipe still works the wrong way round. When you swipe right to left, the scheduler is going into history. If you are showing 8th February and do swipe right to left, the scheduler then shows 7th February.

#17

There are some issues with doing Touch in the MONTH view.

I am doing my testing with Android tablets using Build scheduler_37_130209.

It’s quite hard to explain exactly what is happening, but I think that if you play around with the supplied example, you will quickly notice these issues.

Sometimes the “Quick Info” window will not open after you touch an event.

Sometimes you get a message in the top right saying “Drag to create”.

This is only happening in the Month view, and does not happen in the Week view or day view.

Also it seems to happen more when there are multiple events on a single day.

If it possible that it is related to the fact that the “touchable area” is much smaller in month view than in the other views and so it is more difficult to touch in the right place?

#18

In case of android table it may be related to the device vendor. What is the device and version of android?

With small devices it can be really harder to toch events, but “drag” message must appear only after long touch, which must not be related to the screen size.

#19

My 2 tablets are

Asus A500 running Android 3.1 (10inch display)
Coby Kyros MID7035 runing Android 4.0.3 (7inch display)

#20

I was able to try another Android Tablet today, and this experienced the same problems as the other Android tablets.

  1. Swipe works the wrong way round.

  2. To get the swipe action to complete, you must swipe and then tap.

The android tablet that I tested today was

Make: Virgo
Model: WM8850-mid
Android version: 4.0.3