Add events to AddEvent in Bubble - AddEvent 4

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

Learn how to integrate with a no-code API connector to create new events and add them to a popup in your app in this step-by-step tutorial.

API Connector creating new events

So now we've got the
in our app.

Adding a button and arranging elements

So let's pop back into the editor and we're going to add in another button and I'm just going to put all of these things into a row so we take up less space. Move this one to the very end. Yeah, and we'll call it AddEvent.

Creating the pop up layout

And so this is going to show a pop up. I'm not going to spend too long styling it. Just put a little bit basic layout padding in there and we're going to have one input for the title and then we'll have a date time input for the start date.

Adding input fields for title and start date

Now I'm only going to put the start date in. You can of course add in additional parameters and you can check the ad event documentation. How to do that. I'm just doing this as quickly as I can so the video doesn't get too long and basically it's going to make it an hour long because it's just going to default. Assume that the end date is an hour later. I'm just going to change the format so it's a little bit clearer to me at least being british and having, wanting my dates in a certain order. And then I'm going to add a create button.

Sending a request to create event

So what happens? Well, when the button is clicked we need to send a request to the API create event. And remember we need our start date in this exact format.

Formatting the start date

So I'm going to start by filling in the title. I'm going to go back to my pop up and title of event because that way it updates the internal labeling system in Bubble so it just makes it easier.

Adding the calendar id

Now the calendar id. So this is current user calendar id.

Formatting the start date

And then start date is going to be date time pickers value. Now we have to make sure we format it exactly as it wants and it doesn't give us a preset that lays out how ad event wants it. So we have to write out ourselves.

Formatting the start date: year, month, day, hours

So year. Year is quite simple and I've already forgotten which month, day, hours. Fine. And it's separated by hyphens.

Formatting the start date: month

So then we go mmm. Now we have to make sure that mmm, lowercase is months whereas mm, uppercase. I'm just checking the time in the top right of my Mac is minutes. So months DTD for day. I'm checking this as I go along and then it wants a space and now it wants hours.

Formatting the start date: hours

I can tell you that. I'm not recording this at three in the morning. This is three in the afternoon. And so I'm going to check the documentation here again. And it looks like it has to be 24 hours because there's no way of specifying if it's am or p m. So I'm going to try capitals. Yeah, 15, that's it. Colon. And remember that's month. So capitals for minutes.

Hiding the pop up

Going to close that. And then we want to hide the pop up. Let's try that.

Fixing a mistake

So I've made a big mistake here. Big mistake.

Creating the event

Not a big mistake. It. This should be the create button. What have I done here? When that button is clicked, we create the event. When our event is clicked, we show the pop up.

Showing the pop up

Sorry, I'm not on the ball now. Not at all. Right, let's try that.

Testing the AddEvent functionality

So shows the pop up. So we'll call this custom event and then let's say today, and I've not even got a, I've not even got the time on my date picker.

Adding an event

Let's try that AddEvent. So we'll call this custom event and then yeah, we'll say today at 430, create sends the API call.

Refreshing the page

Now this is something you might have to work out. It's because I'm embedding it. It doesn't seem like it updates automatically. So I'm actually going to add in a page refresh action there. So when in fact then we don't need to hide the pop up. I'm just going to add in refresh the page preview.

Adding another event

Let's add in an event tomorrow. Call it event two. And there we go. It's added to the page.

Using AddEvent to provide calendar subscription feed

Now I tried to show the most straightforward way of going about this, although when I have used AddEvent in the past, I've basically used it to mirror events that I've got in Bubble. So instead of embedding the AddEvent calendar straight in my Bubble app, I've had a data type called events and I basically had to have some mirror operations workflows going on that each time an event is added in my Bubble app, I make that event in AddEvent. And my reason in that instance for using AddEvent is I wanted to provide users with a calendar subscription and I'm going to demo what I think is going to let me do that right away.


So yeah, with the calendar embedded in, I can just click on here and then this would open if I clicked it, my calendar app on my Mac and I'd be able to subscribe to this calendar. And then this is why alivet is so powerful. I would see these events and anything that I've associated with those events in my calendar. I'm going to record one final part to this miniseries, and that's going to be basically if you go down that route. I was just saying, what if you're creating events as a data type in Bubble and you're just mirroring those into AddEvent? Because all you want to use AddEvent for is to provide a calendar subscription feed.