Here’s a mod I can’t live without. This tooltip will translate your appointments into three other time zones. Also, it’s easy to customize so you can add more cities if you need to. This is also a great example of how fun it can be to use JavaScript within FileMaker because JS makes these kinds of timezone transformations much easier.
Transforming Times with Moment.js
DayBack includes the wonderful momentjs and moment-timezone libraries for working with dates and times. That makes a tooltip like this a lot easier. For example, if you want to translate the event’s start time into London’s time zone, you do this:
event.start.clone().tz('Europe/London')
And if you want to turn that time into text like “in 34 minutes” you can just do this:
event.start.fromNow()
Having written tons of FileMaker functions for date and time parsing back in SeedCode Calendar’s early days, I’m in love with these momentjs functions.
Adding little JS tooltips to DayBack is also a great way to get your feet wet with JavaScript, and you’ll find some simple examples here to get you started.
Add this to Timezone Tooltip to Your File
Tooltips were added to DayBack as an in-app update in version 10.42 so make sure you’re up to date. There are two methods for adding a tooltip to DayBack: you can add the commands inline, right into DayBack’s configuration script, or you can export the tooltip’s JavaScript as a file and then point DayBack at that. The inline version is fine when you have just a tiny bit of JavaScript, like this example which shows the event’s title in the tooltip:
dbk.tooltip(event.title);
That’s great and documented here, along with several examples. However, for longer code chunks, like the one for this timezone tooltip, it’s easier to export a file. This way, you can make changes to the tooltip in your favorite text editor and the paste that right into a FileMaker field without worrying about escaping your quotes as you’d have to if you tried to reference the JS inline in a FileMaker calculation.
The file-export method is the same one DayBack uses for JavaScript custom actions, here’s how to use it:
1. Download the JavaScript for this tooltip: TimezoneTooltipJS.txt.zip
2. Follow steps 1 through 3 here under the heading “Adding JavaScript actions to your file.” Those steps show you how to create a text file for this JS along with a FileMaker script to export it. You’ll add the name of your exported file to the script, so call it “timezoneTooltip.txt.”
3. Enter browse mode, then open TimezoneTooltipJS.txt. Copy the contents and paste that text into your new text field, so it’s ready to export.
4. Now edit the script “Load Source Settings at Startup…” in DayBack and find the comment “Event actions for WebViewer events…” at around line 33. (There is one of these sections per source, but line 33 is where the one for source no. 1 is located.) Edit the next Set Variable to set the $$sc_EventActions variable like this, replacing the “NA”s with the strings shown here:
// BEGIN Event Action 1 Substitute ( List ( "On Event Hover" ; // Action trigger, what interacting triggers this action "file:timezoneTooltip.txt" ; // FM Script Name or Javascript "False" ; // Prevent default action. Will prevent the default behavior "[editable, readonly]" // Event types that can use this action in brackets [editable, readonly] (optional) ) ; [ ¶ ; ", " ] ; ["NA" ; ""] ) // END Action
5. Download this CSS (TimezoneTooltipCSS.txt.zip) and add that to DayBack’s theme. If you haven’t modified DayBack’s CSS before, it’s easy. You’ll find detailed instructions in our docs along with lots of cool examples.
6. That’s it! Run DayBack’s “Upon Opening” script and you should see your new tooltip when you hover over events. To make changes to the tooltip’s JS, paste new text into the text field you created in step 3 and run the “Upon Opening” script again to see your changes take effect.
Customizing the Cities
The JavaScript and CSS you’ll add to your file were created by Ana Petrechenko, SeedCode’s new intern from 42U. She did a great job making this easy to understand and easy to customize. To change or add cities, you’ll modify the section of the tooltip shown below. To add a city, copy the last block (Tokyo), paste it in below Tokyo’s section, and then change the city name and time zone name. The tz() function in each line takes the city’s actual time zone name, and you can find the complete list here.
/* You can set up different timezones here */
var timeZones = {
newYork : {
name : "New York",
time : event.start.clone().tz('America/New_York')
},
london : {
name : "London",
time : event.start.clone().tz('Europe/London')
},
tokyo : {
name : "Tokyo",
time : event.start.clone().tz('Asia/Tokyo')
},
};
Big thanks to Ana for this wonderful mod, and to Jason, Tanner, and KC for the coaching!
