WeekCalendar with drag and drop

Document created by okramis on Aug 16, 2017Last modified by okramis on Mar 4, 2018
Version 17Show 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



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


• new version WeekCalendarPlus: optional set a date for a one-time event.


2017-11-15 - updated version of WeekCalendarPlus

double-click into grid to add a event, if calendar icon is highlighted, a one-time-event is created

second view "Resource" (Rooms) to the event-data

• handle overlapping, display in half-columns/rows (max 2 simultaneous events)

• cleaned up, some documentation of the custom functions

• new switch _subgrid to show 1 or hide 0 quarter-grid-lines


170224 - added FullCalendar-implementation to WeekCalendarPlus, layouts "Teacher FullCalendar" and "Resource FullCalendar", this handles multiple overlapping events nicely.


170304 - minor css-tweaks to WeekCalendarPlus



get ResourceCalendar here: Resource-Calendar

13 people found this helpful