Display Events From Google Calendar On Your Website

Recently, a client had an issue with a Google Calendar event plugin that she had installed a few years ago. It hadn’t been updated and threw a fairly serious error. I looked around at the existing plugin options, but everything was super heavy or had too many options. 

That’s when I found this great script from Tatsuki Sugiura on Github. It basically just pulls in the next 10 events on a public calendar and displays them in text format. Perfect.

Simply link the js file, or enqueue if you’re using WordPress, then add this script where you want the events to show up on your page:

				
					<div id="gcf-simple"></div>
<pre><code></code></pre>
<script type="text/javascript">
$(function() { $('#gcf-simple').gCalFlow({
  calid: 'YOUR_CALENDAR_ID_HERE'
});});
</script>
				
			

I created a shortcode so that the client could add events from several calendars across the website. You also might want to change the date and time formatting based on who your audience. I updated the script in the jquery.gcal_flow.js file and edited the date_formatter function to this:

				
					date_formatter: function(d, allday_p) { 
		const monthNames = [" ", "Jan", "Feb", "Mar",  "Apr", "May", "Jun",  "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
		const month = (pad_zero(d.getMonth() + 1));
		const shortmonth = +month;
		const hours = (pad_zero(d.getHours()));
		const hoursfix = ((hours + 11) % 12 + 1);
		const suffix = (hours >= 12)? 'pm' : 'am';
		var fmtstr;
        if ((typeof Globalize !== "undefined" && Globalize !== null) && (Globalize.format != null)) {
          if (allday_p) {
            fmtstr = this.globalize_fmt_date;
          } else {
            fmtstr = this.globalize_fmt_datetime;
          }
          return Globalize.format(d, fmtstr);
        } else {
          if (allday_p) {
            return (d.getFullYear()) + "-" + (pad_zero(d.getMonth() + 1)) + "-" + (pad_zero(d.getDate()));
          } else {
            return monthNames[shortmonth] + " " + (pad_zero(d.getDate())) +  ", " + (d.getFullYear()) + "<br>" + hoursfix + ":" + (pad_zero(d.getMinutes())) + " " + suffix;
          }
        }
      },
daterange_formatter: function(sd, ed, allday_p) {
		const hours = (pad_zero(ed.getHours()));
		const hoursfix = ((hours + 11) % 12 + 1);
		const suffix = (hours >= 12)? 'pm' : 'am';
        var endstr, ret;
        ret = this.date_formatter(sd, allday_p);
        if (allday_p) {
          ed = new Date(ed.getTime() - 86400 * 1000);
        }
        endstr = '';
        if (sd.getDate() !== ed.getDate() || sd.getMonth() !== ed.getMonth()) {
          if ((typeof Globalize !== "undefined" && Globalize !== null) && (Globalize.format != null)) {
            endstr += Globalize.format(ed, this.globalize_fmt_monthday);
          } else {
            endstr += (pad_zero(ed.getMonth() + 1)) + "-" + (pad_zero(ed.getDate()));
          }
        }
        if (!allday_p && (sd.getHours() !== ed.getHours() || sd.getMinutes() !== ed.getMinutes())) {
          if ((typeof Globalize !== "undefined" && Globalize !== null) && (Globalize.format != null)) {
            endstr += Globalize.format(ed, this.globalize_fmt_time);
          } else {
            endstr += " " + hoursfix + ":" + (pad_zero(ed.getMinutes())) + suffix;
          }
        }
        if (endstr) {
          ret += " - " + endstr;
        }
        return ret;
      }


				
			

You’ll also need to set up your own API so you don’t run into usage issues, but there are pretty clear instructions here.

Hopefully this will help you get a nice list of upcoming events to show on your website without a ton of work.

If you liked it, share it

Facebook
Twitter
LinkedIn

What do you think?