Document created by okramis on Aug 25, 2017Last modified by okramis on Sep 5, 2018
Version 40Show Document
  • View in full screen mode

Here's a cleaned up and a bit enhanced version of my landscape-timeline web viewer-based calendar.

Improved FM Go touch-handling


• double-click/long-touch into grid for new event

• click on row-title for resource-detail window

• tooltips on events (FM Pro)


Hope it's of use


best regards



p.s. FM14 up, best experience in FM16


previous versions and week-calendar here: WeekCalendar with drag and drop

triggering thread here: Week (not weekly) Schedule


new Version:

• added vertical "now"-timeline. Gets actualised by rerendering of the calendar or by JS by inactivity.

• "_dragstep" now in minutes, for 1 hour set it to 60

• additional switch "_showdate": overrides "_showtime" and displays start- and end-date instead of start- and end-time, might be handy for systems allowing only full-day bookings (12:00 PM to 12:00 PM i.e.)


17/12/23 • added time-grid shown, when day-width allows


17/12/31 - happy new year!

• new switch _halfrow: handle double-booking, display in half-rows (max 2 simultaneous events) if _halfrow = 1



• enhanced version to show resources/events grouped by projects (same resource can be part of multiple projects)

• additional to my CF-based calculated webpage (layout GUI), I've integrated fullcalendar's scheduler (layout GUI Scheduler). The JS-libraries are put in table JSLibraries and the needed ones loaded into global variables on solution start. The page itself is in JSLibraries ID:12, the placeholders get substituted by the calendar-data in field GUI::HTMLScheduler. I've done a few minor tweaks in the CSS-files but most is left unrendered.



• added some language libraries to scheduler, some minor adjustments in presentation.

If you want to add some more languages, take the files from fullcalendar version 3.4, the ones from 3.8 are not compatible.

                 472 KB              



• date navigation, depending on number of displayed days

• my own FM-rendered calendar (layout GUI): reworked CSS

• FullCalendar-Scheduler (layout "GUI Scheduler"): agendaWeek- and month-view added, script to ftp-upload or mail the html-file to publish on a web server. Inject the "open source" license, if you integrate it in your solution, set the license according to your usage (open source, non commercial, get a valid commercial license: Purchase Scheduler | FullCalendar )



• added a version using JSONP and hash-change technic as shown here: Communicating with a Web Viewer in FileMaker – beezwax > blog

  to minimise screen flicker. The hash-change works fine on macOS, unfortunately forces a webviewer reload on windows, so not really a win for win;-)



• added MBS-function to call the JS-functions. If MBS-plugin is installed, active and registered with a valid key, on macOS and Windows its function is used to update the calendar content. If not, on macOS the JSONP/hash-trigger is used, on Windows and iOS JSONP and webviewer-refresh is used.



• found a way around the Windows hash-trigger issue. If you add a named iframe with zero size to the html body and call the fmpURL by'fmp://.....', iframename), the hash-trigger works on windows too.



• updated ResourceCalendar-file. Optimised for larger time range display and additionally integrated fullCalendar-scheduler (layout "GUI Scheduler").


• change in CF "ListOfDate" (make localisation independent) and "setCalendarGrid" for localised month names (set variable _months according your language by uncomment/comment/edit at Let-statement start )


• added language-switcher to "GUI" (en, de, fr, es). Edit "setCalendarGrid" for more localisations.



• fixed a issue when CF-framework is copied to a file with a non dot (.)-based decimal format. As html/javascript expects the dot as decimal delimiter the events won't show correct if values like "35,5" are passed into the html or opposite "35.5" is passed to a FM-script as a parameter. So I added two CFs - JSDecimal ( _value ) and FMDecimal ( _value ) - to translate between the systems. If you're sure there's no need for a translation, you can uncomment the first variant in the CF-definitions and just return the input, it might have a small impact to performance.

• fixed refresh on filter toggle

• some representation reworks, weekend background not in timeline row, weekend background also in views > 30 days, if it's large enough.



• on request added 3 additional config-variables: _bhstart, _bhend and _newlength for defining business-hours and the default length of a new event. Now the 1-day view zooms in to defined business-hours range.



• ResourceCalendar, removed unneeded refresh. In Start-script a new global variable $$showactivestate is set, if set to 1, the event gets highlighted on klick (as before), if set to 0 or empty, there's no highlighting means less refresh needed, better responsibility, special on hosted solutions.

• The drag-javascript now keeps events inside the existing resources-boundaries, it's not anymore possible to drag further down/up than there're displayed resources.

• build-date under ?-layout.

• added a simple undo-function, revert last (accidentally) dragged event.



• further refresh optimising by moving HTMLCalendar-calculation to script refresh for better control.

• support for calendar-interaction in WebDirect by calling a CWP-php file instead of the fmp-url. The php-script writes into table Tasks, and a onTimer-script reads the task-entries and run the FM-interaction-scripts. Further information under the ?.



• got GUI Scheduler working in WebDirect too. As we need the php-file on FMS anyway, why not just put the javascript-libraries there too and load them by src=...

further instructions under layout HowTo / ?.



• additional switch _centerdate. If set to 1 (in set Variable $calendar in script refresh), the date is displayed at noon above the time tag, if 0 at midnight instead of the time tag. Value is set to 1 in this file-version.

• Doubleclick/long touch for new event now respects the _dragstep and does not set the start time just to full hour.



• ResourceCalendar now renders unlimited concurrent/overlapping events, the row-space just increases as much needed. Start- and end-time has to be in 5 minutes grid for overlapping to be detected. For a smaller/larger grid, edit the auto-enter formula of Events::timestampList according to your needs. If you change it, trigger a recalculation of the field by i.e. Replace Field Contents... Events::datefrom --> formula = datefrom.



• Some bug fixing and cleanup, removed unused legacy code. Replaced the recursive CF for the timestampList-calc using Agnès Barouh's CustomList-function to avoid potential recursion limits, and substituted the system dialog on event deletion by a popover. Added unstirred calc-field overlapGrid, used in auto-enter-calcs on Events::timefrom, Events::timeto and Events::timestampList, set to 5 (min.). Change to make overlap-detection-grid wider or smaller.



• Merged resource-grouping from ResourceCalendarScheduler (a resource can only be member of 1 group), click on group-label shows group-detail-window.

• Changed WebDirect php-bridge to take filename as a parameter to work filename independent (only 1 php-file needed for multiple instances)

• Replaced all Set Field By Name with Set Field and removed GetField(). As the solution has grown in complexity, there's no benefit for integration from this anymore. It seems better to rename TOs/tables/fields temporarily to match the sample-solution for integration. Only ExecuteSQL()-functions have to be adjusted on renaming tables/TOs back, best search for occurrences in database design report.

• Some more fields changed from un-stored calculation to stored auto-enter calculations, tooltip-calculation moved to Events::fieldlist



• Added event-copying by drag&drop. Drag event while holding shift-key or activating the new button below the "undo"-button (touch-devices) horizontally in time or vertically to a other resource. Copied events are grouped by IDSeries and edits applied to the group. Event start-change is only applied to events with the same start-time.

To edit a event independently remove it from the group by clicking the series-button in the event-detail-window. You can re-attach it by clicking the greyed out series-button.

• moved needed-slots subquery to Resources-table for performance increase and FM15 compatibility.

• new button "scroll lock" for touch-devices (FMGo and WebDirect on tablets) for easier dragging.

• constrained dragging to either horizontally or vertically. For changing time and resource, do it in two steps.



• Some cleaning up. Moved common javascript-functuns to custom function jsHelper(). Reworked series-handling, moved series-events-updating to script UpdateSeries called from UpdateEvent, UpdateEventScheduler and Undo. Series-handling and shift-drag-copying  now in Scheduler too.

44 people found this helpful