Customize Calendars in FileMaker 19 with JavaScript
We’re pretty visual people. It’s usually easy to consume data when it’s represented graphically as opposed to tabular format. When we’re looking at our schedule of activities and events, we typically like to see that information laid out in a standard calendar form.
It’s probably fair to say that we all rely on calendars to maintain organization and punctuality. Calendars are ubiquitous; they’re on our walls, phones, watches, tablets, computers and even on some fancy new refrigerators. The use of calendars dates as far back as the Bronze Age. Many of the artifacts left by ancient cultures, from rock carvings to monumental structures, were built originally to serve as public calendars. And, since they’re an effective timekeeping mechanism, we learned how to read and understand them at an early age.
FILEMAKER 19 JAVASCRIPT
Given the prevalence of calendars in our daily lives, why has it been so hard to display and interact with them in FileMaker? Sure we’ve been able to push our FileMaker data into third-party solutions for years. And we’ve painstakingly crafted calendar-like interfaces in FileMaker by using a bunch of portals laid out in a grid. But neither of these solutions offers optimal performance or the precise user experience that we want. Thanks to the arrival of FileMaker 19, Claris has given us a way to bring calendar functionality directly into our custom app, using our data as its engine.
Most of this new functionality has been made possible by the new set of features in FileMaker 19, particularly a tight integration with JavaScript. Before the release of FileMaker 19, developers could execute JavaScript in a web viewer object and even run FileMaker scripts via the FMP URL, but it was sometimes a clumsy affair. What’s worse, these tactics didn’t work at all in FileMaker’s WebDirect client. Another hurdle to overcome was the need to restructure our app’s data into JSON format before feeding it to JavaScript. In all fairness, previous versions of FileMaker do provide a few functions to help us do that, though it’s usually a slow and cumbersome process. But lo and behold! FileMaker 19 simplifies all of this by allowing us to query our solutions natively and return the results in JSON format. We can call scripts using special JavaScript functions, which makes it possible to run it in any FileMaker client.
CALENDARS MADE EASY
If you’re wondering what any of this has to do with creating calendars, check out our downloadable sample file (Ed. note: The first download posted here did not have FullCalendar files needed for the sample to work. The download file has been updated and contains new links to external files) (Note 2: Updated 7/6/20 to fix issues with WebDirect and to remove passwords) (Note 3: Updated 7/27/20 to a slight correction to the data API call in the sample file. Specifically, we changed the search for the dates from “or” to “and.“) You can transfer aspects of this file into your solution and then point a few scripts and calculations to your data and you’re off!
The sample file is a fully working model of what you could have running in your solution using your event data. The JavaScript portion is based on the FullCalendar project, an open source project used by thousands of developers around the world and even more end users. It features drag-n-drop, daily/weekly/monthly views. It’s also fully responsive, which is a technical way of saying the interface resizes automatically according to the size of the device on which the user is viewing it – phone, tablet, or desktop. FullCalender’s JavaScript/HTML is then wrapped in a FileMaker application, driven by FileMaker’s database of events. We only need two tables, the calendar itself and the events. The sample file includes a handful of scripts to get you started as well as some pretty advanced local caching capabilities that will come in handy if you need to use this tool offline. Let’s break it down by section, so you have an idea of what you’ll find in this sample file.
- Calendar layout – with a web viewer on it; this is used to view and interact with the calendar.
- CSS layout – CSS is the web’s language for creating style; modifying areas of this field’s content will change the color, font and other formatting aspects that you see in the web viewer.
- HMTL Layout – this is the real meat of the calendar and you don’t really have to modify anything, but if you’re an advanced developer, this is the hood you’ll want to poker around under.
- Settings Layout – this field contains all the levers and knobs you’ll want to pull or turn to tune the HTML engine to your specifications.
- Events Table – this is where the data is stored; it’s associated with a few of the card window layouts used to create, read and edit them. This table will most likely already be in your solution, so you simply would need to hook into it.
- The Scripts – by and large, these are copy and paste affairs; however, we strongly suggest using them as examples of how to create your own. In the end, if you use the scripts as a reference, you’ll gain a good understanding of how they work. Then you’ll be in a position to support and extend these features in the future.
One thing to keep in mind about this sample file is not to rename any of the scripts that have an underscore (_) in their names. These scripts are called from the HTML/JavaScript and so they need to be hardcoded. Of course, that’s not typical of most things in FileMaker, so that’s why we mention it.
Admittedly, this sample file is relatively limited and it’s not as polished as a production app would be. It’s basically intended for demonstration and educational purposes. Nevertheless, the sample file should open the door, just a crack, and give you a peek into the future possibilities for extending your FileMaker solutions.
Pascal De Plancke
June 23, 2020 @ 9:20 am
it looks like the download of the dependencies in the script “Set Webviewer” don’t work
I don’t know what’s wrong, but I get a completely empty web viewer
Don Clark
June 23, 2020 @ 10:50 am
Hi Pascal,
Make sure you copy over the required Custom Functions from the Sample File. They are used in the Download Dependencies script.
Don
Don Clark
June 23, 2020 @ 2:56 pm
Hi again, Pascal:
The first download posted at first did not have FullCalendar files needed for the sample to work. The download file has been updated and contains new links to external files. Please download the new file in order to get the updated information. Thanks – Don
Pascal De Plancke
June 24, 2020 @ 4:27 am
tx
now it works!
jon
June 23, 2020 @ 11:55 am
The sample file is blank, nothing is showing
Don Clark
June 24, 2020 @ 12:16 pm
There is a new version at the original link in the article. Please download it and see if your problems are solved. Let me know how it goes, please.
Don Clark
June 25, 2020 @ 1:02 pm
Hi Jon,
The first download posted at first did not have FullCalendar files needed for the sample to work. The download file has been updated and contains new links to external files. Please download the new file in order to get the updated information. Thanks – Don
Ian Stewart
June 23, 2020 @ 12:16 pm
Hello Don,
Does the sample work “as is” as I too just get an empty web viewer?
Would be nice to see it working in the sample, before trying to graft it into a solution.
Regards
Ian
Don Clark
June 24, 2020 @ 12:18 pm
Hi Ian,
There is a new version at the original link in the article. Please download it and see if your problems are solved. Let me know how it goes, please.
Ian Stewart
July 6, 2020 @ 9:22 am
Hello Don,
Sorry, I didn’t let you know earlier, yes the new version works fine, thanks.
Victor Hugo Alfaro Sequeira
June 23, 2020 @ 12:27 pm
Por favor. Como puedo copiar las funciones personalizadas requeridas del archivo de muestra ???
Victor Hugo Alfaro Sequeira
June 23, 2020 @ 12:39 pm
El guion de configuración no esta funcionando bien. Señor Clark me puede apoyar ?.
Don Clark
June 24, 2020 @ 12:17 pm
Hi Victor,
There is a new version at the original link in the article. Please download it and see if your problems are solved. Let me know how it goes, please.
Don Clark
June 25, 2020 @ 1:04 pm
Hola Victor,
La primera descarga publicada al principio no tenía archivos FullCalendar necesarios para que el ejemplo funcionara. El archivo de descarga se ha actualizado y contiene nuevos enlaces a archivos externos. Descargue el nuevo archivo para obtener la información actualizada. Gracias – Don
Dan
June 23, 2020 @ 4:52 pm
Hi Don,
web viewer is still empty.
The “load_calendar” script returns error “[5] Command is invalid ….” after script step “Perform Javascript In Webviewer…” (line 25).
Alistair
June 23, 2020 @ 10:58 pm
Don
Thanks for another great Filemaker example,
however, as I am from Australia how do I change the time zone
Don Clark
June 25, 2020 @ 1:01 pm
Hi Alistair,
In the Calendar Setting script on line 14, you can define it ie: Australia/Perth.
Don
alistair
June 30, 2020 @ 8:56 pm
thanks, that works
Günter Borg
June 24, 2020 @ 10:25 am
Also here with the updated file , empty WebViewer.
Don Clark
June 24, 2020 @ 12:08 pm
Hi Günter,
Please close the file, delete the fm_calendar folder in your Documents folder, then reopen the file. Let me know if that works.
Don
Günter Borg
June 24, 2020 @ 2:55 pm
Hello Don,
Yesss ! now it works perfectly
many thanks
Günter
Martin Spanjaard
June 25, 2020 @ 5:07 am
I have exactly the same problem: “It looks like the download of the dependencies in the script “Set Webviewer” don’t work. I don’t know what’s wrong, but I get a completely empty web viewer.” With the downloaded file (which contains the CF’s), not with a file I made. Whatever script I run: totally blank window. Any advice?
Martin Spanjaard
June 25, 2020 @ 5:11 am
Sorry Don, after sending my comment the page was refreshed, all the other comments became visible, and I read not only that I had to gedownload the sample file (which I had done) but also should delete de fm_calendar folder. Now it works. Thanks.
Don Clark
June 25, 2020 @ 9:27 am
Hi Martin,
Glad it worked!
Don
george
June 30, 2020 @ 3:17 am
Hello Don,
i wanted to ask if the Calendar works in Webdirect? Thanks!
Don Clark
June 30, 2020 @ 1:54 pm
Hey George,
Yes, it does work in WebDirect!
Don
Al Ismail
July 6, 2020 @ 1:21 pm
Hi,,
Sorry if this is a stupid question, but I can’t seem to open the sample file, it is asking for a user name and password.. Did I miss something?
Al
Don Clark
July 6, 2020 @ 3:51 pm
Hi Al,
The file has been update to handle some WebDirect issues, and the username and password have been removed.
Don