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.

Share on facebook
Share
Share on twitter
Tweet
Share on linkedin
Share
Share on pinterest
Pin

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Other Stuff You Might Like

Looking for Hosting?

Stafford Creative uses and recommends Siteground for fast, reliable hosting for every project and budget.

*Stafford Creative may receive a small commission with each signup.