In the fourth and final part of the small series on connecting FileMaker and web views with HTML/JavaScript/jQuery content, I will once again showcase another popular plugin that has caused a stir in the FileMaker world since its release:
It’s the fullcalendar by Adam Shaw (https://fullcalendar.io/). This brilliant calendar plugin, which continues to amaze me to this day, made me marvel at how easily it can be integrated into FileMaker and the possibilities it offers.
I will write another separate article about this plugin, firmly promised!
Since this plugin is written in jQuery, it’s very easy to incorporate custom hooks using the jQuery functions for manipulating a DOM element via $(‘#ObjectID’).
However, with fullcalendar, this is usually unnecessary due to the abundance of already implemented events. We just need to append our FileMaker record ID (`filemakerRecordId`) to the actual event so that it can be identified later:
{
title: '" & fc_title_auto & "',
" & If ( fc_dateStart ≠ "" ; " start: '" & fc_dateStart & "'," ; "" ) & "
" & If ( fc_dateEnd ≠ "" ; " end: '" & fc_dateEnd & "'," ; "" ) & "
allDay: " & fc_allDay & ",
id: " & fc_id & ",
description: '" & fc_description_auto & "',
color: " & "'rgba(" & If ( fc_color = "" ;
Substitute ( HexToRGB ( fc_event~fc_calendar#fc_calendarId::fc_color ) ; ¶ ; "," ) ;
Substitute ( HexToRGB ( fc_color ) ; ¶ ; "," ) ) & "," & fc_alpha & ")'" & ",
editable: " & fc_editable & ",
A_ID: " & filemakerRecordId & ",
}
Let’s start with moving an appointment, which of course triggers a script in FileMaker that adjusts our record accordingly. Looking into the event documentation, we find the `eventDrop` event, which is triggered when the user moves the appointment and drops it. We can easily incorporate this event using our function and its placeholders (`__placeholder`):
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
if (event.allDay) {
var ad = 'true';
var sd = event.start.format('DD.MM.YYYY');
var st = event.start.format('HH:mm');
} else {
var ad = 'false';
var sd = event.start.format('DD.MM.YYYY');
var st = event.start.format('HH:mm');
};
var msg = "drop||||" + event.id + "||||" + ad + "||||" + sd + "||||" + st + "||||" + event.A_ID;
window.location = '__script¶m='+msg;
}
`window.location` then calls a FileMaker script and passes the data as a pipe-separated string. In this case, the placeholder `__script` would be ‘fmp19://$/” & Get ( FileName ) & “?script=Return_fullcalendar’.
Similarly, intercepting the change in the duration of an appointment is straightforward:
eventResize: function(event, delta, revertFunc) {
var ed = event.end.format('DD.MM.YYYY');
var et = event.end.format('HH:mm');
var msg = "resize||||" + event.id + "||||" + ed + "||||" + et + "||||" + event.A_ID;
window.location = '__script¶m='+msg;
}
And incorporating clicking on an appointment to open a FileMaker card window with the appointment details is easy:
eventClick: function(Event, jsEvent, view) {
var msg = "clickEvent||||" + Event.id + "||||" + Event.A_ID;
window.location = '__script¶m='+msg;
}
Even creating an appointment by dragging in the HTML calendar is intercepted with just a few lines of code and then sends the event data from fullcalendar to the FileMaker script:
select: function(start, end, allDay, prio, interval) {
var starttime = moment(start).format('MMMM Do YYYY h:mm a');
var endtime = moment(end).format('h:mm a');
var allDay = !start.hasTime() && !end.hasTime();
var msg = "newEvent||||"
+ start.format('DD.MM.YYYY') + "||||"
+ start.format('HH:mm') + "||||"
+ end.format('DD.MM.YYYY') + "||||"
+ end.format('HH:mm') + "||||"
+ allDay;
window.location = '__script¶m='+msg;
}
These are all the hooks needed to connect fullcalendar to FileMaker.
You can find many more possibilities of the plugin in the documentation, which can also be connected to FileMaker via hooks, but for the conclusion of this series of articles, these simple functions should be sufficient.
Let’s take one last look at the approach I take when dealing with FileMaker web views containing HTML/JavaScript/jQuery content.
When I have a plugin that I want to integrate, I first consider which points should provide a hook to FileMaker. These are usually not very many because most functions are already provided by the plugin itself – we usually only need a trigger in FileMaker when records change.
Then I look at the documentation of the respective plugin. Most of the time, they are very well written, and it saves a lot of time to read the documentation instead of delving into the code, even though that’s not popular (I’m not exempt from that).
If I don’t find any clues here, I look at the source code of the plugin and try to understand how it works and where I can set a hook – Stack Overflow and now also ChatGPT are always good helpers here.
Once I’ve found the point in the source code, I insert my hook – don’t worry if it doesn’t work right away. I myself have spent hours on it because, of course, I know FileMaker much better and only acquire as much web technology as I need to achieve the goal.
My recommendation here is always jQuery. This add-on makes handling objects in HTML so much easier! Incorporating your own hook is much easier with jQuery than with just web code if you’re not familiar with it.
And maybe you need a mentor to show you the ropes. I was lucky 10 years ago (has it really been that long?) to become aware of this technique through a blog article (https://scarpettagroup.com/using-jquery-ui-filemaker-part-3/) and at the same time to meet the author, Aaron Giard, who patiently and passionately helped me overcome the stumbling blocks. I am deeply grateful for his help to this day!
Likewise, I hope that this small series of articles has also shown you an entry point and conveyed some of the joy I’ve had in integrating such plugins.
As always, if you have any questions, feel free to send me an email, and I’ll try to answer as soon as possible.