Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.