Creating Calendar Events - AddEvent 3
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.
Create custom calendars in Bubble: Learn how to build dynamic event scheduling with AdEvent integration and API calls!
Unlock advanced calendar features: Discover how to add reminders and create events programmatically using Bubble's API Connector.
Master calendar ID management: See how to properly handle and utilize calendar IDs for seamless event creation and display.
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.
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.