Add events to AddEvent in Bubble - AddEvent 4
Learn how to integrate Bubble.io 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.
Unlock AddEvent's power: Learn how to seamlessly integrate calendar events into your Bubble.io app with this tutorial.
Master API integration: Discover how to create and sync events between your Bubble app and AddEvent, enhancing your workflow capabilities.
Elevate your Bubble skills: Transform your app with dynamic calendar subscriptions and effortless event management.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.