WeekCalendar with drag and drop

Document created by okramis on Aug 16, 2017Last modified by okramis on Aug 25, 2017
Version 9Show Document
  • View in full screen mode

Triggered by this thread Week (not weekly) Schedule  I built a sample with a web viewer based calendar. My initial implementation of drag and drop with native html5 events worked fine on mac, but on windows there was always a additional click or leaving the web viewer with the mouse needed to have the callback script running, so I built the functionality myself with mousedown/touchstart, mousemove/touchmove and mouseup/touchend events. It's working fine so far, so I share it here.

All the web-element generation is put in custom functions, the actual webpage is generated in the auto-enter-calc of the global field HTMLCalendar. Customization is done in setting params in the let-part of this calculation, the recalculation is triggered by toggling a global "_refresh", some more info under "HowTo".

 

best regards

otmar

 

Just discovered a bug in the CF jsDragAndDrop: in "function roundToGridY(y)" is a hard coded value for hour height in pixel, line

 

return (Math.floor(offset / " & _dragstep & ") * " & _dragstep & ") / 60 * 76;¶

 

needs to be replaced by:

 

return (Math.floor(offset / " & _dragstep & ") * " & _dragstep & ") / 60 * " & _hheight & ";¶

 

New Version with tooltips and additional horizontal timeline version.

 

and Resource Calendar, showing horizontal timeline for n days and n resources.

 

• new version of the Resource Calendar: mark weekends and double-click into grid for new events

 

new improved Resource-Calendar version here: https://community.filemaker.com/docs/DOC-8518#comment-27269

Outcomes