Making Timezone Conversions Easily Accessible for Online Events

When you hold a seminar or conference online, you make it available to the world — and even if you were compelled to take it online by COVID-19, you ought to take advantage of that fact. That means attracting people from many timezones, not just the timezone the organizers happen to be located in. Yet even many professional events, fail to make this easy — expecting people to be able to do the mental math to calculate the difference from EST to PST to GMT and beyond.

With RSVPMaker’s Show in my timezone button, the computer can do the math for them. Recent enhancements allow you to use it in a broader variety of situations.

The example here is from VTM CON on Dec. 5, 2020, a conference for speakers and leaders I’m helping publicize. I was a founder of Online Presenters Toastmasters, one of the sponsors, which has been using the Show in my timezone button on its event notices for years, but in this case we wanted to show the entire schedule of events for the conference in a table. The times for EST, PST, and UTC were entered by hand, but we wanted to make the listing equally accessible to people in other timezones.

You can see it live and register for the event. If you attend, be sure to say hello.

For the VTM CON example, I’ve added the CSS class tz-table2 to the an HTML table created with the WordPress block editor. This tells my script the data to be converted is in the second column of the table. The available classes are tz-table1, tz-table2, and tz-table3 for the first second and third columns of a table.

You can also apply tz-convert to a table or another container block such as a paragraph, heading, div, or span element. When tz-convert is applied to a table, the script searches for any content formatted like a time (either 1:00 PM or 13:00). The data to be converted should be the only content in the table cell or other container targeted.

In the WordPress editor, you can add a class to any block of content by selecting Advanced in the sidebar panel for that block type.

Using tz-convert for my table would be fine if it only contained times in EST, but in my example it would also mess with the times given for PST and UTC. Using tz-table2 avoids that issue.

For those interested in the technical details, I’ve provided an HTML / JavaScript example at the end of this post that could be used outside of WordPress or RSVPMaker.

Timezone Conversion for the RSVPMaker Schedule Block

The timezone conversion feature also works with the RSVPMaker Schedule listing, which was introduced several versions ago as an alternative to the RSVPMaker Upcoming schedule listing.

Here, the idea is that each session of the conference has been modeled as its own RSVPMaker event. The RSVPMaker Schedule block includes options that allow you to limit the listing by start and end date and by the RSVPMaker Event Type (similar to a category for a blog post).

Rather than showing the full date and time at the start of each post, RSVPMaker shows the date just once for each event falling on that date, followed by the start time, the event title, and the content of the event. Within each event post, you can use the more tag to specify content that should only be displayed if the user clicks Read More — making the schedule easier for the viewer to scan quickly.

The tz-convert tag is automatically added to the times in an RSVPMaker Schedule display, so that’s a detail you don’t have to worry about. Just toggle on Display “Show in my timezone” in the block settings to activate this feature.

If you’re a user of the software, but not a programmer, you can stop reading now. The next section is just for other coders.

HTML/JavaScript Code Example

Here is a working example of my timezone table example with some of the complexities specific to my plugin stripped away. JavaScript knows the viewer’s timezone as long as that person’s computer clock is set correctly, so there is no need to ask for it.

The script takes advantage of the fact that JavaScript can also parse a datetime string that includes a timezone into a universal timestamp, representing it in memory as in integer. When you then as the script to display the time, it shows it relative to the user’s own timezone.

Most of the necessary information, such as the original datetime and timezone, is included as attributes on the Show in my timezone button. The rest of the script uses JQuery selectors to target the HTML classes I’ve designated for data that can be converted.

	<!DOCTYPE html>
	<html lang="en-US" class="no-js no-svg">
	<head>
	<meta charset="UTF-8">
	<title>Timezone Conversion Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>
	<body>
	<h3 class="dateblock"><span class="event-date">Saturday December 5, 2020</span> <span class="event_time">8:15 AM</span> EST</span></h3>
	<div id="timezone_converted"></div>
	<div class="rsvpcalendar_buttons"><button class="timezone_on" datetime="2020-12-05 08:15:00" timezone="EST">Show in my timezone</button></div>
	<p>Click the button above to see the times converted for your timezone (based on your computer clock).</p>
	<figure class="tz-table2">
	<table><tbody>
	<tr><td>PST</td><td>EST</td><td>UTC</td><td>Event</td><td>Coordinators</td></tr>
	<tr><td>5:15&nbsp;AM</td><td>8:15&nbsp;AM</td><td>1:15&nbsp;PM</td><td>Warm up / Entry into event</td><td>Nik Lakhani</td></tr>
	<tr><td>6:00&nbsp;AM</td><td>9:00&nbsp;AM</td><td>2:00&nbsp;PM</td><td>Welcome to VTM Conference</td><td>Lois Margolin DTM / Nik Lakhani</td></tr>
	<tr><td>6:10&nbsp;AM</td><td>9:10&nbsp;AM</td><td>2:10&nbsp;PM</td><td><a href="https://vtm.toastmost.org/speaker-linda-marie-miller/">WORKSHOP &#8211; Linda-Marie Miller</a></td><td>Mathilde Fischer DTM</td></tr>
	<tr><td>7:00&nbsp;AM</td><td>10:00&nbsp;AM</td><td>3:00&nbsp;PM</td><td>Break</td><td></td></tr>
	<tr><td>7:15&nbsp;AM</td><td>10:15&nbsp;AM</td><td>3:15&nbsp;PM</td><td><a href="https://vtm.toastmost.org/rsvpmaker/evaluation-contest/">Evaluation Contest</a></td><td>Carol Prahinski DTM PID / Lukas Calafell</td></tr>
	<tr><td>8:45&nbsp;AM</td><td>11:45&nbsp;AM</td><td>4:45&nbsp;PM</td><td>Break</td><td></td></tr>
	<tr><td>9:00&nbsp;AM</td><td>12:00&nbsp;PM</td><td>5:00&nbsp;PM</td><td>Result and Interview with Winner</td><td>Carol Prahinski, DTM PID</td></tr>
	<tr><td>9:05&nbsp;AM</td><td>12:05&nbsp;PM</td><td>5:05&nbsp;PM</td><td><a href="https://vtm.toastmost.org/roger-courville/">WORKSHOP &#8211; Roger Courville</a></td><td>Mac Whyte</td></tr>
	<tr><td>9:55&nbsp;AM</td><td>12:55&nbsp;PM</td><td>5:55&nbsp;PM</td><td>Break</td><td></td></tr>
	<tr><td>10:10&nbsp;AM</td><td>1:10&nbsp;PM</td><td>6:10&nbsp;PM</td><td><a href="https://vtm.toastmost.org/speaker-derrick-trimble/">WORKSHOP &#8211; Derrick Trimble</a></td><td>Louis Brown DTM</td></tr>
	<tr><td>11:00&nbsp;AM</td><td>2:00&nbsp;PM</td><td>7:00&nbsp;PM</td><td>Break</td><td></td></tr>
	<tr><td>11:15&nbsp;AM</td><td>2:15&nbsp;PM</td><td>7:15&nbsp;PM</td><td><a href="https://vtm.toastmost.org/rsvpmaker/table-topics-contest/">Table Topics Contest</a></td><td>Carol Prahinski DTM PID / Lukas Calafell</td></tr>
	<tr><td>12:15&nbsp;PM</td><td>3:15&nbsp;PM</td><td>8:15&nbsp;PM</td><td>Break</td><td></td></tr>
	<tr><td>12:30&nbsp;PM</td><td>3:30&nbsp;PM</td><td>8:30&nbsp;PM</td><td>Result and Interview with Winner</td><td>Carol Prahinski, DTM PID</td></tr>
	<tr><td>12:35&nbsp;PM</td><td>3:35&nbsp;PM</td><td>8:35&nbsp;PM</td><td><a href="https://vtm.toastmost.org/speaker-fursey-gotuaco/">WORKSHOP &#8211; Fursey Gotuaco</a></td><td>Natalie Thomas</td></tr>
	<tr><td>1:25&nbsp;PM</td><td>4:25&nbsp;PM</td><td>9:25&nbsp;PM</td><td>Break</td><td></td></tr>
	<tr><td>1:40&nbsp;PM</td><td>4:40&nbsp;PM</td><td>9:40&nbsp;PM</td><td><a href="https://vtm.toastmost.org/marquesa-pettway-discover-your-zoom-speaker-brand/">WORKSHOP &#8211; Marquesa Pettway</a></td><td>Ilda Kuleba</td></tr>
	<tr><td>3:30&nbsp;PM</td><td>5:30&nbsp;PM</td><td>10:30&nbsp;PM</td><td>Thanks and credits</td><td>Lois Margolin DTM / Nik Lakhani</td></tr>
	<tr><td>3:40&nbsp;PM</td><td>5:40&nbsp;PM</td><td>10:40&nbsp;PM</td><td>END OF EVENT</td><td></td></tr>
	</tbody></table>
	</figure>
	<script>
	$('.timezone_on').click( function () {
	var datetime = $(this).attr('datetime');
	var event_tz = $(this).attr('timezone');
	var localdate = new Date(datetime+' '+event_tz);
	localstring = localdate.toString();
	$('#timezone_converted').html(localstring);
	var match = localstring.match(/\(([^)]+)/);
	var timeparts = datetime.split(' ');
	var newtime;
	var timecount = 0;
	$('.tz-convert, .tz-convert table tr td, .tz-table1 table tr td:first-child, .tz-table2 table tr td:nth-child(2), .tz-table3 table tr td:nth-child(3)').each(
	function () {
	celltime = this.innerHTML.replace('&nbsp;',' ');
	//if celltime contains time but not more html
	if((celltime.search(/\d:\d\d/) >= 0) && (celltime.search('<') < 0)) {
	timecount++;
	newtime = timeparts[0]+' '+celltime+' '+event_tz;
	console.log(newtime);
	ts = Date.parse(newtime);
	if(!Number.isNaN(ts)) //verify string parses to time
	{
	localdate.setTime(ts);
	newtime = localdate.toLocaleTimeString().replace(':00 ',' ');//get time for user's locale, stripping off seconds
	this.innerHTML = newtime;
	$(this).css('font-weight','bold');
	}
	}
	}
	);//end tz_convert each
	var checkrow = true;
	$('.tz-table1 table tr td:first-child, .tz-table2 table tr td:nth-child(2), .tz-table3 table tr td:nth-child(3)').each(
	function() {
	if(checkrow && (this.innerHTML != '') && (this.innerHTML.search(':') < 0) ) // if this looks like a column header
	this.innerHTML = '<strong>Your TZ</strong>';
	checkrow = false;
	}
	);
	});
	</script>
	</body>
	</html>

view raw Timezone Conversion Demo hosted with ❤ by GitHub

The code sample is not identical to the code used in RSVPMaker, which includes PHP to pull dates, times, and other data from the the WordPress database. Complete code is on Github at https://github.com/davidfcarr/rsvpmaker