Creating Calendar Events - AddEvent 3

Creating Calendar Events with AddEvent

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. 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.

Setting Up the API Call

I need to have a title so I'm going to type in here test and I'm going to have a calendar ID so I'm just going to put ID in there. This is so that I'm guessing 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 AddEvent to write the code I need to copy and paste into Bubble. So then let's add in... I just want to use the example. Now 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.

Advantages of Using AddEvent

This is once more a feature that you can't really build using the default calendar plugins in Bubble. You need to use a third-party service like AddEvent to do this and I'm going to take this copy it and go back into my API connector and add in another call and we shall say this is create event and again I want it to run in a workflow. That'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 and let's now make part of this dynamic.

Setting Up Dynamic Parameters

So we're going to have title, we're going to have calendar ID... ooh I 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 documentation. That's the format that it needs me to present it in. 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.

Initializing the API 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. 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 a 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'll go back into plugins API connector, paste in the calendar ID. I'm just going to say testing event and initialize my call.

Correcting a Mistake

Ah and the calendar ID has not been found. 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've cut I'm going to cut out what's just happened in order to try to explain it in a clearer manner.

Understanding Calendar IDs

So basically when you create a calendar, so let's let's go for demo, 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 add events 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 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.

Fixing Previous Mistakes

So to update this I'm looking at demo three and 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 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 I see if I've created that calendar from scratch it's now all linked up all the data that I have missed because I've overlooked it is in place and so let's go back to where I was which is in the plugins create calendar create event.

Creating the Event

So my calendar ID is there and then I'm gonna just so that this is easier to find. 24 we're in January and then initialize the call. Click save. Now if I go in and I go here we go testing events that is the event I've created. 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.

Conclusion and Next Steps

Once more I'm gonna keep some of the rough stuff from this video in. I'm sorry that it wasn't covered in a previous video and 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 pop-up and then how we can subscribe a user.