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.


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.


 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.

  1. Calendar layout – with a web viewer on it; this is used to view and interact with the calendar.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

Thanks! You've already liked this
Need FileMaker Development Help? Or to purchase FileMaker Software?
Contact FM Pro Gurus for help