How to Use QL Events to Open Up Calendar Data for Non-WordPress Sites

There’s a movement that’s been gaining momentum in the WordPress space called headless CMS. The idea is that WordPress can be used solely as a content management system (CMS) and the data it contains can be used anywhere — including on a non-WordPress site or app.

A new extension called QL Events brings this concept to life for your events. By using this extension, the event content you publish in WordPress becomes available as an API that sends data to other sites and apps that request it.

We wouldn’t have this fantastic tool if it weren’t for Simplur funding the development of it. We’re proud to manage it now, and we are immensely grateful to Simplur and to Geoff Taylor of XWP for his incredible work developing QL Events.

Up until now, you technically could have used The Events Calendar outside of WordPress using the REST API. But if, like Simplur, you’re building lightning-fast websites with Gatsby, you need a GraphQL solution. QL Events adds exactly what you need to connect Gatsby and The Events Calendar.

Below, we’ll dig into how you can use QL Events to open up your calendar data for non-WordPress sites. We’ll also provide some background on the query language and tools that come together to make QL Events work.

The quick-start guide to QL Events

If you’re ready to dive right in, here’s how to get QL Events up and running on your WordPress site.

First, install the following plugins:

• The Events Calendar (WordPress Plugin Directory, other plugins optional)
• WP GraphQL (WordPress Plugin Directory)
• QL Events (Extension directory)

Those first two are installed the same as any other WordPress plugin. For QL Events, you’ll need to download the zipped file from our extensions directory.

From there, you can either upload the unzipped version to your server in the /wp-content/plugins folder, or navigate to Plugins → Add New in the WordPress admin and upload the zipped file to install the plugin.

Once all of the plugins are installed and activated, a GraphQL item is added to the WordPress admin menu with an item to open the GraphiQL interface for querying data.

Give it a try!

Not sure where to start in GraphiQL? Here’s a query you can copy and paste into your query panel. Click the “Play” button above the panel and watch the results kick in.

query MyQuery {
  events {
    nodes {
      slug
      title
      id
      databaseId
      author {
        node {
          name
        }
      }
      content
    }
  }
}

The background: Meet GraphQL, WP GraphQL, and GraphiQL

If you’re interested in a deeper dive, here’s a rundown of the systems and tools that power QL Events.

GraphQL is a language used to query data from an API. In other words, you tell it what data you want, and GraphQL fetches it. Nothing more, nothing less.

WP GraphQL is an ongoing project to integrate GraphQL into WordPress. It was recently added to the WordPress Plugin Directory. This tool allows developers to tell GraphQL the data they want, and GraphQL communicates with the WordPress REST API, grabs what it needs, converts the data to JSON, then exposes it so you can use it.

WP GraphQL also integrates another tool called GraphiQL (pronounced “graphical”) that lets us write queries, see the results, and export the code — all from the WordPress admin.

Check out this example:

A closer look at QL Events

Now that we’ve covered the basics, let’s take a closer look at QL Events.

With this extension installed and activated, data from The Events Calendar is made available to GraphQL. In other words, it gives GraphQL access to the plugin’s data so that it can be queried alongside other WordPress data, then sent over to a website front-end that is completely separate from WordPress.

Here’s an example:

QL Events is compatible with Event Tickets, as well as Events Calendar Pro and Event Tickets Plus. That means we can access API endpoints for everything from ticket information for a specific event to the names and registration information for all attendees for an event.

QL Events unlocks a lot of potential

We ‘re so excited that the data from our plugins can be integrated into GraphQL.

This opens up a lot of opportunities. The ability to port content out of WordPress into other places can be useful in so many ways, whether you’re making a custom app for a large event, creating new calendar views, or anything else you dream up.

The fact that you are no longer bound to a theme to display WordPress content means that your calendar data can be integrated just about anywhere on the web.

Additional resources

Here are some links to other articles that you might find helpful as you get started:

• What is a Headless CMS? (CSS-Tricks)
• How To Build A Blog with WordPress and Gatsby.js (Tim Smth)
• Introducing Headless WordPress with Gatsby Cloud (Gatsby.js)
• Creating a Gatsby Site with WordPress Data (CSS-Tricks)
• How to Create a Headless WordPress Site on the Jamstack (Smashing Magazine)