Add events to AddEvent in Bubble - AddEvent 4

Creating Events in AddEvent

So now we've got the API connector creating your events. Let's work it into a pop-up in our app. So let's pop back into the editor and we're going to add in another button. I'm just going to put all of these things into a row. So we take up that space. Move this one to the very end. Yeah, and we'll call it add event and so this is going to show a pop-up. Not going to spend too long styling it. 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.

Configuring the Event Creation Form

Now, I'm only going to put the start date in. You can of course add in additional parameters and you can check the add 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 make yeah, 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 a British and having once in my dates in a certain order and then I'm going to add a create button.

Setting Up the API Request

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. So I'm going to start by filling in the title. That I'm going to go back to my pop-up and title of event because that way updates the internal labeling system in Bubble, so it just makes it easier. Okay back here to find title of event and that's helpful because I think I use title as the placeholder for the calendar as well.

Formatting the Date for AddEvent

Now the calendar ID. So this is current user calendar ID and then start date is going to be date time picker's 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 add event wants it so we have to write out ourselves. So yeah, yeah, yeah, it's quite simple and I've already forgotten which are a month day. Hours fine and it's separated by hyphens. So then then we go MMM now we have to make sure that MMM lowercase is months whereas MMM uppercase I'm just checking the time in the top right of my Mac is minutes so months BTD for day. I'm checking this as I go along and then it wants to space and now it wants hours.

Finalizing the API Request

So I can tell you that I'm not recording this at 3 in the morning. This is 3 in the afternoon and so I'm gonna check the documentation here again and it looks like it has to be 24-hour because there's nowhere specifying if it's AM or PM. So I'm gonna try capitals yeah 15 that's it colon and I remember that's month so capitals for minutes. Gonna close that and then we want to hide the proper. Let's try that.

Correcting Workflow Errors

So ah. Made a big mistake, a big mistake. Not a big mistake I. 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. Sorry, I'm not on the ball now not until right. Let's try that.

Testing the Event Creation

So shows the pop-up so we'll call this custom Event and then let's say today. I don't even got a I've not even got the time on my date picker. Let's try that. I Advent so we'll call this custom event and then yeah, it will say today at 4:30 create. Sends the API call now, this is something you might have to work out 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 we hide we don't in fact then we don't need to hide the pop-up. I'm just gonna add in refresh the page preview. Let's add in an event tomorrow. Call it event 2.

Reflecting on the Implementation

Okay, and there it goes added to the page now. I tried to show the most straightforward way of going about this although when I have used add event in the past I've basically used it to mirror events that I've got in Bubble. So instead of embedding the calendar the add event counter straight in my Bubble app I've had a data type called events now. 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 in add event and my reason in that instance for using an event is I wanted to provide users with a Calendar subscription and I'm gonna demo what I think is gonna let me do that right away.

Demonstrating Calendar Subscription

So yeah with the 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 our event is so powerful. I would see these events and anything that I've associated with those events I in my calendar. I'm gonna record one fun apart to this mini series and that's gonna 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 add event because all you want to use an event for is to provide a calendar subscription feed.