Org Mode: JS for translating times to people's local timezones
| org, emacs, jsI want to get back into the swing of doing Emacs Chats again, which means scheduling, which means timezones. Let's see first if anyone happens to match up with the Thursday timeslots (10:30 or 12:45) that I'd like to use for Emacs-y video things, but I might be able to shuffle things around if needed.
I want something that can translate times into people's local timezones.
I use Org Mode timestamps a lot because they're so easy to insert with C-u C-c ! (org-timestamp-inactive), which inserts a timestamp like this:
By default, the Org HTML export for it does not include the timezone offset. That's easily fixed by adding %z to the time specifier, like this:
(setq org-html-datetime-formats '("%F" . "%FT%T%z"))
Now a little bit of Javascript code makes it clickable and lets us toggle a translated time. I put the time afterwards so that people can verify it visually. I never quite trust myself when it comes to timezone translations.
function translateTime(event) {
if (event.target.getAttribute('datetime')?.match(/[0-9][0-9][0-9][0-9]$/)) {
if (event.target.querySelector('.translated')) {
event.target.querySelectorAll('.translated').forEach((o) => o.remove());
} else {
const span = document.createElement('span');
span.classList.add('translated');
span.textContent = ' → ' + (new Date(event.target.getAttribute('datetime'))).toLocaleString(undefined, {
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
timeZoneName: 'short'
});
event.target.appendChild(span);
}
}
}
function clickForLocalTime() {
document.querySelectorAll('time').forEach((o) => {
if (o.getAttribute('datetime')?.match(/[0-9][0-9][0-9][0-9]$/)) {
o.addEventListener('click', translateTime);
o.classList.add('clickable');
}
});
}
And some CSS to make it more obvious that it's now clickable:
.clickable {
cursor: pointer;
text-decoration: underline dotted;
}
Let's see if this is useful.
Someday, it would probably be handy to have a button that translates all the timestamps in a table, but this is a good starting point.
