Beginner's Guide: Custom Calendars in Bubble.io | AddEvent Mini Series Part 1

Introduction to AddEvent for Bubble.io

If you're looking to provide your Bubble app users with some amazing calendar features, then you're going to need to use AddEvent. AddEvent is a fantastic service with an amazing API that allows you to create calendars, create events, and what is really hard to do without it in Bubble, the ability to provide a link with which your users can subscribe to a calendar. So that means that you can have the events created in your app appearing in your user's Google Calendar or on their iPhones and their Apple calendars. So I'm going to show you how to do that in this mini series.

Getting Started with the AddEvent API

To begin with, we need to get started with the API. In my Bubble app, I'll just show you what I've got so far. I've just got a page here and I've got a create calendar. I want to create a calendar that is then linked to my user. So every user in my app could conceivably have their own calendar in AdEvent. I'm then going to probably in some follow-up videos show you how we can display that calendar and how we can add in that subscribe button.

Setting Up the API Connector in Bubble

For starters, we want to go into the documentation and we want to create a calendar. I've made a bit of a head start here. We need to take the API documentation here and put it into the Bubble API connector. I'm going to point out a few things and then show you where they go in the API connector. We've got our endpoint and it needs to be of type post. We've then got some details here of what needs to be included in the header of the API call. So we have to have accept, application JSON and content type application JSON. There's also a blurred one here and this is my API key.

Understanding API Keys and Authorization

As is the case with many applications where there's some sort of billing elements, you'll need an API key in order for a service like AddEvent to know who to bill for the usage and basically to ensure that their service continues to run smoothly. So this would be authorization and then bearer and then my API key.

Setting Up the API Call in Bubble

You can see that I made a start with that here. I've got a new API, AdEvent, I've got private key in header, I've then got bearer and my API key down here. Authorization, I've got my other header calls here and so I can start by adding in a call. And so this will be create calendar and remember it's a post and because I want to use it in a workflow, I set it as an action and then let's flick back and this is my endpoint.

Adding Parameters to the API Call

There's only one required field here which is title but to demonstrate what you can do with it, I'm also going to add in time zone. So let's go back into here, paste in the endpoint and then add in the parameters. So we have title and time zone. So we'll just say demo2 and time zone we can say Europe, London.

Initializing the API Call

And then I'm going to click initialize call and this is our way of checking that everything we've entered so far works and if it works, hopefully it does brilliantly, we also get to train Bubble on what to expect as the return to the API call. So the main bit here is this bit here, unique key because this is how we will identify this calendar when we come to embedding it and using other embeddable elements like the subscribe button from add event.

Creating a Workflow for Calendar Creation

I'm going to click save and then we will go through to design and we'll add this into a workflow. So when this button is clicked, we'll create a workflow and now we're going to plugins and you can see all of the other plugins or APIs that I've integrated in with the past. If you want to learn how to use lemmasqueezy, if you want to web scrape, if you want to do speech to text, we've covered all of those in previous videos but right now I'm looking for add event and of course that's right at the top and I fill in, in fact let's give the user a chance to customize this a bit, we'll add in a field and we'll call this on title.

Testing the Calendar Creation

So the title will be input title value. Okay and so the execution of step one is going to create a calendar in our add event account and if I go back here and I refresh it, we can see that demo two which is what we initialized our API code with is already created. So I'm actually going to, oh I'll leave it there for now and then we'll leave that same Europe, London.

Saving Calendar Details to User Data

Now so that we can continue to work with the calendar, we need to save some details back into current user and the way that I'm building this app, my intention is basically that every user in my app will get their own calendar. So I'm going to then say make changes to current user and I'm going to add in a field and call it calendar ID and now I can go to the results of step one and I can get the unique ID key.

Previewing and Testing the Calendar Creation

Let's preview this. It's worth pointing out that I am logged in as a test user, so I'm going to say well yeah we'll just go demo three, create calendar. Okay now has it worked? Well we can go ahead and check because if it's worked and we go into data and go on to users and this is the one I'm running as we can see that the calendar has an ID and notice that ends in 7.5.

Verifying the Calendar in AddEvent Account

Let's go into our add event account and check it out. Demo three and we'll go on to the calendar sharing page. We can see that yes we have a calendar with a unique ID ending in 7.5 and basically this page here provides you with tons of different things that you can do with it like direct linking to a templated page that they've made or embedding it in the Bubble app or adding in a like add to calendar button here.

Next Steps: Embedding Calendars in Bubble

That is all covered but what I'm going to show you in follow-up videos is basically how you can take the code that they use to make these embeddables and you can put that straight on your Bubble app and dynamically fill it in with your calendar ID.