An Awesome FullCalendar

As a long time developer of FileMaker solutions, I clearly remember the first time I personally attempted to create a calendar solution. It was not as easy as I'd initially thought. There were a TON of "little things" which you find out about down the road.

Don't get me wrong, the learning experience is well worth it and made me a better developer for sure! But, when it comes to building one natively within FileMaker today, it just doesn't make much sense. That is, unless you really only need the most basic of calendars. If you don't care about multiple calendars, flexible displays and interaction, the ability to drag-n-drop and many more features then, sure, you can make a grid of 42 objects and show "some" of your solution data.

However, if you're in the need of something which will handle user editing controls, multiple time zones, multiple view styles and is HIGHLY extensible, then you can't beat free if you're willing to take the time and learn about FullCalendar.

Of course, that's why you're subscribed to the magazine site right? We'll save you many hours of effort and struggle by getting you up and running with a very powerful Javascript based calendar!

Attachment	Size
Fullcalendar.zip	113.94 KB

External links

Tags:

Calendars

JavaScript

Comments

Repeating Events

Can Full Calendar handle repeating events (i.e., every 3rd Thursday of the month)? Thanks.

I would check the docs

https://fullcalendar.io/docs/recurring-events

Likelihood is high. ;)

Web viewer debug

Hi Matt.
Web viewer debug is new to me. What you say about it does not explain how I can implement it. Sorry. IWhat is default write.com.filemaker.client... anyway? It does not look like a URL. Sorry if I don't understant.

bug in demo file

great video, thanks.
When you move the up and down button and you go e.g. from Sept > Oct > Nov you will see that it flips back a month and only at the next click will it move to the next month. This does not happen with the debugger on. But with the dataViewer open and the debugger closed, you can see that $$CAL.DATE is not refreshed at the first touch of the arrow buttons.

Strange effect as the inbound script param is exactly the same at both clicks.

Peter Sijmons
Szienz
Netherlands

fix

There is a need to update var $$CAL.DATE with JSONGetElement ( Get ( ScriptParameter ) ; "date" ) in Calendar::Nav by adding Set Variable line there.
Then it works.

Calendar::nav glitch

Where in the "Calendar::nav" Script would this new SetVariable line go?

Note: There is already a set $$CAL.DATE in line 13 of the script

Calendar::nav glitch

ok, so without modifying the script, I found that if I click the next and previous buttons very slowly it works. I think it just takes a moment for the new data to load and the calendar to refresh with the new data before you are allowed to click it again. If you click it again before the calendar has a chance to update then the event listener cannot activate because the calendar is still updating..

My solution to the Calendar::nav glitch

My solution for this is to simply remove the navigation buttons and heading from the webviewer and replace them with actual buttons and heading above the window.. This puts the control solely into FileMaker which will give you better control over the timing for the population of data as well as the refreshing of the calendar.. Works much better now.

Timezone

I found that this has to do with timezones. I had to add 1 hour (2 hours for summertime) to $$CAL.START, $$CAL.END for this problem to stop.

Scaling in FileMaker Go

Has this been tested at all in Go? I was able to quickly implement this and it looks great on a 360pt X 700pt layout in FileMaker Pro, but the same layout is rending much smaller in Go.
i.e. in week view Pro shows 6 hours while Go shows 24 hours, and most text is too small to read
Edit: the same layout looks great on iPad, the scaling issue is only on iPhone.

FullCalendar

Two issues that I cannot find the answer to. I believe they are related.
Mouse Clicking on a nav button (forward/back) stops the ability to drag and drop the calendar events.
After this a mouse will no longer click on the nav elements, they are only accessible by using tab_enter.
What am I missing?
Thanks!

Correct above question

Tab is the only way to trigger the eventlistener on the Forward/Back Keys or on the Day/Week?month selector. Click or enter key will cause the event. Drag and drop do not work. I looked at potential windows security feature with Filemaker event listener, but did not affect these issues.

Cannot get Date select & drag working

Hi Matt, I've been trying to add a trigger to enable the creation of a new record when multiple empty days are dragged and selected in month view. This is the code I was adding:

select: function(info) {
PerformScript('dateClick',info.event.id + "\n" + info.event.start.toISOString() + "\n" + info.event.end.toISOString() );
},

Can you tell me what I might be doing wrong? The calendar is still loading but since adding this, when I select multiple dates the calendar freezes and I have to refresh it.. The event is not triggering?

update..

For anyone else having this issue, I was able to get this to work:

select: function(info) {
PerformScript('dateClick',info.startStr + "\n" + info.endStr);
},

Importing into current solution

I'm working on implementing the calendar into my current filmmaker solution. The sample file works as expected so to start I imported all of the scripts, custom functions, and layout elements from the sample file and get it working as it is in the sample file. Once that is working I would continue wiring it to my own tables and fields.

I'm running FileMaker 18 on Mac and have turned on fmurlscript in the files security settings.

First I imported the scripts and custom functions into my solution. I created a table in my solution with the same name (Fullcalendar). I copy and pasted all of the fields from the Fullcalendar Table in the sample file into the Fullcalendar Table in my solution.

I copy and pasted the layout elements from the sample file into my solution and linked up the fields and portal so my data from the Fullcalendar table was showing.

Once my solutions layout loads and the imported "Startup" script runs, everything goes according to plan except the"Get Events (start; end)" script. Instead of pushing the data from the Fullcalendar table in the proper JSON format it kicks back the Generic JSON formatting without the data from the table and then not showing the events and breaking the calendar.

Everything seems to be working except the SQL/JSON/FILEMAKER link and again, the fmurlscript is turned on.

Thank you, any help would be greatly apprecated and thanks for the videos Matt

Importing into current solution

I'm running FileMaker 18 on Mac and have turned on fmurlscript in the files security settings.

I copy and pasted the layout elements from the sample file into my solution and linked up the fields and portal so my data from the Fullcalendar table was showing.

Everything seems to be working except the SQL/JSON/FILEMAKER link and again, the fmurlscript is turned on.

Thank you, any help would be greatly apprecated and thanks for the videos Matt

FIXED

When I imported the fc_end, Event object and Start fields by simply copying and pasting them from one document to the other, added some text that created syntax errors, once I fixed the three fields I was off to the races. Great solution I have really been needing for a while!

Doesn’t always work on windows

This is awesome, I’ve integrated it to our solution and works flawlessly on Mac. But on Windows, sometimes it works, but most of the time it doesn’t. The calendar renders but it can’t be clicked. Instead it highlights the text rather than responds as a button. I’ve tried different versions of filemaker but the effect is still the same. Please help. Thanks!

Doesn't work on Windows PCs

It seems on Windows, I can get the "Today" button to work and sometimes after I select the Today button other buttons will start to work but then once again, nothing is working. I cannot seem to find a workaround for this. Windows Webviewers are based in Internet Explorer. Code works fine when tested in Microsoft Edge browser but does not work with internet explorer. I have tried the MBS plugin to change the version of Internet explorer it is using but none of the options seem to be helping... Running out of ideas here..

Matt, do you know of any way to get this to work in Windows?

I have even tried it with FMP 19 and I've tried removing the "Windows Feature" of Internet explorer and set the default to MS Edge but still no luck...

Any help would be great!

Update

After some debugging and research, I have found that the reason it is not working in windows is because the JS is using the "Intl.NumberFormat" function which is not compatible with Internet Explorer and must be substituted with an alternative method. The purpose of this function is to format the numbers according to the location the file is being used...

https://stackoverflow.com/questions/56359605/intl-numberformat-is-not-su...

NOTE: The function is being used in the "FullCalendar Core Package v4.3.1" section of the JS

ISO FileMaker Magazine

Site navigation

User menu

You love new FileMaker information right?