Recently, a stakeholder came to me with a problem. The Google Calendar events they created and shared with their audience weren’t working. If an attendee tried tapping the event link from their mobile device, it simply didn’t add that event to their calendar.
Pinpointing the problem
I discovered the broken feature in Google Calendar that caused this issue. Specifically, the More Actions > Publish Event feature that Google Calendar provides.
When the stakeholder shares this link and the potential attendee clicks this link, it should add a copy of the event on the attendee’s calendar. This works great if attendee is on a desktop/laptop but not if they try clicking that event link from their mobile device. On mobile devices, clicking this link simply opens the attendee’s Google Calendar app (or worse, calendar.google.com in the native browser), but doesn’t add the event to their calendar.
What gives, Google?!
Maybe there are additional calendar settings changes, something with public vs private calendars, or any other number settings changes that I simply haven’t found to solve this. Regardless, I took it into my own hands to create a solution that works.
The mobile-friendly solution
After some research, I found the solution that works for desktops, laptops, AND mobile devices. That is to build your own event link with URL-encoded data for title, location, and description. Plus ISO-formatted start and end dates. The link format is as follows:
https://google.com/calendar/event?action=TEMPLATE&dates=startDateISOFormat%2FendDateISOFormat&text=encodedTitle&location=encodedLocation&details=encodedDescriptionThis is clearly not something I can expect my stakeholders to do on their own.
Empowering my stakeholders
An overriding principle of my professional work is to make it easy on my stakeholders to create for the web. Whether that be via user-friendly website edit screens for advanced webpage layouts, or in this case creating mobile-friendly event links.
Since 2020, I’ve been learning JavaScript deeply so I decided to build a tool that creates these Google Calendar event links through a simple user interface:
How it was built
For the title, location and description form data, I URL-encoded them like this:
The start and end date/time fields are datetime-local input fields, which results in a value such as 2024-09-04T14:30 for September 4, 2024 – 2:30PM. This value needs to be converted to ISO-formatted UTC date/time that Google prefers. This is done like this:
This code passes the date/time value to a new Date object which uses the selected date/time and sets it to the user’s local timezone. Then it converts it to an ISO string, which is in UTC. Google Calendar wants dates & times to be in UTC form.
Regex explained
The regex /-|:|\.\d\d\d/g is used to remove certain characters from this string:
-matches the hyphens separating the year, month, and day (YYYY-MM-DD).:matches the colons separating the hours, minutes, and seconds (HH:MM:SS).\.\d\d\dmatches the period followed by exactly three digits (.sss), which represents milliseconds in the ISO string.
Custom description textarea
I used TinyMCE and customized the WYSIWYG edit options to match what Google Calendar allows. That is, bold, italic, underline, lists and links. This ensures that I’m allowing only the formatting options that Google allows.
Putting it all together
All the URL-encoded and ISO-formatted dates and times are then compiled into a Google Calendar Event link as follows:
let Url = `https://google.com/calendar/event?action=TEMPLATE&dates=${startDateValConverted}%2F${endDateValConverted}&text=${titleVal}&location=${locationVal}&details=${descriptionVal}`;
From there, after the stakeholder clicks ‘Create Link’, the event link (above) is populated in the gray box and the ‘Copy’ button is activated (by removing the disabled attribute.) Additionally the ‘Test your event link now’ button becomes an active link (removing the disabled-btn class) and the href is populated with the event link.
The link builder in action
A win-win
My stakeholder uses this tool on a weekly basis and it enables them to attract more event attendees now that events successfully get added to attendees calendars from their mobile devices.
This project hit the sweet spot between helping my stakeholder attract more attendees and providing a necessary challenge for me with a vanilla JavaScript project.
As a sidenote: I’ve been learning React recently, so I practiced my React skills by rebuilding the above tool in React. Soon, I’ll write a separate blog post about the process of converting a vanilla JavaScript project to React.
Cheers until next time!
Leave a reply