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.
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.
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.
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