Using eModal with Google Calendar Events

I actually have this working, so I’m not looking for support, but I thought others might be interested in the solution I came up with using eModal (with help from eModal support).

Our situation is that we have a 3-day event with a whole bunch of workshops, which are managed in Google Calendar. I’m using the Google Calendar Events plug-in to grab those events from Google, and display them as a list for the schedule page. But because there are a large number of workshops, the amount of information we want to display in the list is relatively small; basically just title and time. We wanted people to be able to click on the event title to get more details about the event (workshop leader, description), but we didn’t want the click to take them out to Google; we wanted them to stay on our site. Google Calendar Events has shortcodes for each of the pieces of data it’s getting from Google, but the only link support it has is to link to the event on Google.

Daniel helped me with a bit of jQuery code, to allow me to pass variables to EasyModal from Google Calendar Events. The jQuery code looks like this:

jQuery('.eModal-1').click(function(e){
  e.preventDefault();
  var $this = jQuery(this);
  var $modal = jQuery('#eModal-1');
 var workshoptitle = $this.data('workshoptitle');
  jQuery('span.workshoptitle', $modal).html(workshoptitle);
// repeat for all variables
});

Then the Google Calendar Events feed looks like this:

[start-time]: <a class="eModal-1" href="#" data-workshoptitle="[event-title]" data-workshopday="[start-date]" data-workshopstart="[start-time]" data-workshopend="[end-time]" data-instructor="[location]" data-workshopdescription="[description]">[event-title]</a>

The final result is at https://bacafest.com/schedule/
It’s a really compact list of workshop titles, which pop up a nice-looking dialog box with instructor name, workshop duration and description. Google Calendar Events automatically parses links stored in Google into clickable hrefs, so we’re able to provide really good exposure for our instructors.

I’m posting because the general use case–wanting to pass parameters to EasyModal–could come up in a lot of different ways, and the fact that eModal can be activated by a standard anchor link means that you can make it work with other plug-ins that don’t support third-party shortcodes.

Thanks!

https://www.ads-software.com/plugins/easy-modal/