• Skip to main content
  • Skip to primary sidebar

DayBack

The Calendar You've Been Waiting For

  • Calendar
    • For Salesforce
      • DayBack Calendar for Salesforce
      • Field Service
      • Calendar Sharing in Salesforce
    • FileMaker Calendar
    • For Google Calendar
    • For Google Sheets
    • For Microsoft 365
    • For Basecamp
    • Integrations
  • Extensions
  • Pricing
  • Blog
  • Support
    • Support Options
    • Documentation
    • Documentation for DayBack Classic (older)
    • Implementation Packages
  • Contact
    • Our Mission
    • Team & Community
    • Careers
    • Contact Us
    • +1 (855) 733-3263
  • Timelines
    • Overview
    • History of the polio vaccine
    • Women’s Suffrage
    • Science Fiction
    • Your Vote in Context: the 2020 US Elections
    • History of Claris FileMaker
  • Sign In

Feb 06 2021

Timezone Tooltips

This is still one of my favorite customizations. This tooltip will translate your appointments into 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 DayBack’s event actions because the moment.js library makes these kinds of timezone transformations very easy.

More Timezone Features

Don’t forget to check out other aspects of DayBack’s enhanced timezone support, including the ability to view the whole calendar in a different timezone.

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()

Adding little JS tooltips to DayBack is also a great way to get your feet wet with JavaScript, and you’ll find some more examples here to get you started.

Add Timezone Tooltips to Your Calendar

You’ll add this as an OnEventHover event action. Start by copying the JavaScript for the action below and then watch this movie to learn where to paste it into DayBack.

Here’s the code you’ll want to copy and paste into your action:

/* Time Tool Tip v1.4 */

/* Purpose: */
/* Shows the event's start time in a tooltip across three different timezones */

/* Action Type: On Event Hover */
/* Prevent Default Action: No */

/* More info on On Event Hover actions and objects here: */
/* https://docs.dayback.com/article/124-action-objects-methods */


initialize (event);

function initialize(event) {
	var city;
	var fullFormat = 'h:mma [on] ddd';
	var shortFormat = 'h:mma';
    var allDayText = '(no specific time)';
  
	/*  Tooltips - You can set up different timezones here */
	var timeZones = {
      	seattle : {
			name : "Seattle",
			time : event.start.clone().tz('America/Los_Angeles')
		},
		newYork : {
			name : "New York",
			time : event.start.clone().tz('America/New_York')
		},
		london : {
			name : "London",
			time : event.start.clone().tz('Europe/London')
		},
        southAfrica : {
			name : "South Africa",
			time : event.start.clone().tz('Africa/Johannesburg')
		},
		india : {
			name : "India IST",
			time : event.start.clone().tz('Asia/Colombo')
		},
      	tokyo : {
			name : "Tokyo",
			time : event.start.clone().tz('Asia/Tokyo')
		},
	};

	/*  Calculate how far from now is the event's start time */
	var timeStart = event.start.diff(moment(), 'minutes');

	/*  How far from now is the start time: show in tooltip header */
	var toolTipContent;
	if (timeStart < -1){
		toolTipContent = 'Occurred ' + event.start.fromNow();
	}
	else if (timeStart > 1){
		toolTipContent = 'Upcoming ' + event.start.fromNow();
	}
	else {
		toolTipContent = 'Starting now';
	}

	/*  You likely don't need to edit after this line */
	/*  For timed events, show cities and timezones; for all-day events, just show the allDayText */
	if (event.allDay) {
		toolTipContent =
		'<div class = "timeToolTip toolTipHeader">' +
			toolTipContent +
		'</div>' +
        '<div class = "toolTipAllDay">' +
			allDayText +
		'</div>';
	}
	else {
		toolTipContent =
		'<div class = "timeToolTip toolTipHeader">' +
			toolTipContent +
		'</div>';
		/*  If the date of the event is different in a new timezone, show the weekday for that timezone's start time */
		for (city in timeZones) {
			var timeZone = timeZones[city];
			if (event.start.day() === timeZone.time.day()) {
				timeZone.label = timeZone.time.format(shortFormat);
			}
			else {
				timeZone.label = timeZone.time.format(fullFormat);
			}
			toolTipContent +=
			'<div class="row">' +
				'<div class="col-xs-5 timeToolTip toolTipContent">' +
					timeZones[city].name + ':' +
				'</div>' +
				'<div class = "col-xs-7 toolTipTimeZone">' +
					timeZones[city].label +
				'</div>' +
			'</div>';
		}
	}

	/*  Tooltip function */
	dbk.tooltip(toolTipContent);
}

To customize the list of cities, just replace the city name and the timezone reference for that city. The tz() function in each line takes the city’s actual timezone reference, and you can find the complete list here: timezone database.

The JavaScript above was written by Ana Petrechenko when she was an intern at SeedCode from 42U. She did a great job making this easy to understand and easy to customize. 

Styling Your Tooltips

You’ll probably also want to style the tooltip the way we have in the screenshot and video above. Copy the CSS below and then paste that into DayBack’s custom CSS. If you haven’t changed the calendar’s CSS before you’ll find a walkthrough here: customizing the calendar’s CSS.

/* Timezone Tooltip */

.timeToolTip.toolTipHeader {
    text-align: center;
    font-size: 16px;
    color: white;
    font-weight: 300 !important;
    margin-top: -32px;
    padding-bottom: 12px;
    white-space:nowrap;
}
.timeToolTip.toolTipContent {
    text-align: right !important;
    color: #B0C4DE;
    white-space: nowrap;
    padding-right: 0px;
}
.toolTipAllDay {
    text-align: center !important;
    margin-top: -3px;
    margin-bottom: -7px;
}
.toolTipTimeZone {
    color: white !important;
    text-align: left !important;
    padding-left: 3px;
}
.tooltip-custom .tooltip-inner {
    width: 170px;
    background: #708090;
    padding: 6px 10px 15px 10px;
    text-align: left;
    border-top: 28px solid #4e5964;
}
.tooltip-custom.top .tooltip-arrow {
    border-top-color: #708090;
}
.tooltip-custom.bottom .tooltip-arrow {
    border-top-color: #708090;
}
.tooltip-custom.left .tooltip-arrow {
    border-top-color: #708090;
}   
.tooltip-custom.right .tooltip-arrow {
    border-top-color: #708090;
}

/* End Timezone Tooltip */

Timezones in FileMaker

Since FileMaker doesn’t have any time zone support, FileMaker records are shown at the literal time entered in an event. So if a FileMaker record has “8:00:00” entered into its start-time field, that’s the time that will show up in DayBack regardless of what timezone you’re in (regardless of what timezone your machine is told it’s in).

However, this tooltip will use your machine’s timezone to calculate the offsets. So if “8:00:00” is entered into your records’ start-time field, and your machine is in New York, the “Seattle” time for the event in this tooltip will read as 5am: since Seattle is three hours before where you currently are in NY.


We hope you find this useful; please get in touch if you have other timezone challenges we can help with.

Written by John Sindelar · Categorized: Dev · Tagged: Custom Actions, For Developers

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Search

Latest Posts

  • Memory is Making
  • Add Notes and Comments to Events
  • Closed Through the New Year
  • Background Gradients on Horizon View
  • Cut and Paste Rescheduling

Pinned Posts

  • Scarcity: the Science of Resource Scheduling
  • Calendars Tell Stories
  • Time Shame – Plan Your Day Like a Road Trip
  • We Can’t See Late
  • You’re Calendar’s Not a Poster

  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • Vimeo

© SeedCode, Inc. 2013–2023
+1 (855) 733-3263
who shot this?

X

View Details
Keep me informed
Which calendar sources interest you?
Interested in a calendar source we haven't listed? Have a question for us? Please let us know.
Loading