Learn how to create events in your Bubble.io app using the no-code platform's API connector and the AddEvent API. By following the step-by-step process, you can easily integrate event creation and management functionality into your app, including features like reminders that can't be built using default calendar plugins in Bubble.io.

Creating the AddEvent calendar



So we've created the calendar in AddEvent and now we've embedded the current user's AddEvent calendar into our Bubble app. Let's actually do something with it and let's create some events.


Creating an event



So to begin with I'm going to go back into the documentation here and I need to look at the events endpoint and then making sure I'm on create event because this is going to tell me all of the essential details for the event.


Event Details



So I need to have a title. So I'm going to type into here, test and I'm going to have a calendar id.


Adding the event details



So I'm just going to put id in there. This is so that I'm getting because you may notice that this is quite a familiar layout for a lot of API documentation. And by doing this I'm basically forcing ad event to write the code I need to copy and paste into Bubble.


The power of AddEvent



So then let's add in. Just want to use the example. I don't need to fill in any of the rest of it, but basically you can get an idea of just how much you can do, including reminders. So this is, once more is a feature that you can't really build using the default calendar
and add in another call.


Create event call



And we shall say this is create event. And again I want it to run in a
. It's going to be a post. My code is going in there, my JSON, and then I need the endpoint. And the endpoint is here's and let's now make part of this dynamic.


Dynamic endpoint



So we're going to have title, we're going to have calendar. I've mistyped that calendar id and we need to have start date. Now I've kept that written as it is because that's the format. If I go back to the documentation, that's the format that it needs me to present it in.


Initialize the call



Now we're going to have to express that in our own way in Bubble and I'm going to show you how to do that in a moment. But I need to first initialize my call. None of these are private because they're all going to be accessible to a workflow on the front end and I'm just going to paste that back in.


Adding the calendar ID



Calendar Id. Now calendar id is going to be the id of the calendar that I've already created. And I want a quick way to get access to that. So on back on design, I'm just going to add in the text label to print the current user's calendar id. Go preview.

Here it is. This is the id that's going into the code that's showing this calendar. And I go back into plugins, API connector, paste in the calendar id. I'm just going to say testing event and initialize my call. And the calendar id has not been found.


Correction for previous video error



Okay, let's go back into the example they've got here. Okay, here is my event having been created, and I've just realized that I've missed something out in the previous videos. And that is the fact that when you create a calendar, you get back two different ids. So let me just recap and cover that because I'm going to cut out what's just happened in order to try and explain it in a clearer manner. So basically, when you create a calendar.


The importance of unique key and id



So let's go for demo five. When you create a calendar, you get back an id and you get back a unique key. So the unique key, this is where I made a mistake. Apologies if you follow along this long, the unique key is what's needed in order to add in a dynamic value into the embed codes. But the id is what's needed to AddEvents into the calendar.


Updating the app



So I'm going to click save and make some changes to bring my app up to scratch with that, which are going to be user calendar id. I'm going to say calendar unique key because I'm already saving that in the workflow. And then I need to have calendar unique id or just calendar id. I'm adding that in as a new field. And so then in my workflow, when I create, my unique key is going in there and then my id is going in there.


Updating the calendar



So to update this, I'm looking at demo three. I'm basically having to just shuffle around the data. So my demo three, calendar. This is the calendar id. Also remember the mistake I made in the previous video.


Update privacy rule



I need to update my privacy rule so that calendar id is accessible. And then in my user here, I'm going to paste in the calendar id basically as if I'd created that calendar from scratch. It's now all linked up. All the data that I had missed because I've overlooked it, is in place. And so let's go back to where I was, which is in the plugins.


Creating the event



Create calendar create event. So my calendar id is there and then I'm going to just so that this is easier to find. 2024, we're in January I'm going to initialize the call click save. Now if I go in and I go here we go testing event. That is the event I've created.


Viewing the event in the Bubble app



Now will that show up and it should do hopefully in our Bubble app. So let's refresh the page here. And there we go there is the event. Testing event. So once more I'm going to keep some of the rough stuff from this video in.


Next steps



I'm sorry that it wasn't covered in a previous video but I'm just showing hopefully the process I go through when I work with an API for the first time. I worked with the previous ad event API many years ago hence why I missed out saving the calendar id in the right place. But we've gone ahead and we've created an event. In the next video I'm going to show you how we can basically work that into a