Add a calendar to a Bubble.io app
In this Bubble.io tutorial video we show how to add a calendar to your Bubble app. We demonstrate how to create a data type for Events and display these events in Full Calendar by Bubble.
Unlock calendar magic: Learn how to add drag-and-drop events to your Bubble app with Full Calendar in minutes!
Master time zones: Discover the secrets of handling time zones in Bubble for seamless global app experiences.
Create dynamic events: Build a powerful form to add and display calendar events with ease.
Adding a Calendar to Your Bubble App
Adding a calendar to your Bubble app is really simple and quick. I've got here a page I'm in the new response engine and first of all I head into plugins and Bubble have got a calendar plugin that they've developed themselves called full calendar you can see there it's gone well it's used by hundreds of thousands of apps literally. There are other calendar apps available which add more features ones by like a Zeroqode for example but this is going to get you a simple calendar app with drag-and-drop events in Bubble.
Installing the Full Calendar Plugin
So we install it and go back to our page and let's add in our calendar and I have to select an event type so I'm going to create a new data type this is an app that I've used for many demos on this channel hence all of the other data types but let's create one called event and then we need to have like start and this is going to be a type date and then finish date and then we also need a label to display on the calendar that's going to of course type text and yeah I think that will get us started.
Configuring the Calendar
So now I can fill out the fields in the inspector here's the type of event is going to be event data source is going to I'm just going to show all of the events that are within my app so do a search for event and then I have a start field and finish field and I need to have a caption and this is my label and then we have additional features such as models modified by resizing by dragging we might touch on that in a future video and let's change start of the day to Monday because that's just how it works in my part of the world and let's also make our width say 900 fixed just so there's a bit of space and let's preview.
Creating Events
Okay so here's my calendar and you'll see that it is looking very empty and that's because I've not created any events so let's create a really quick form for adding in our events so I need a date and time picker and we consider this is date and time I need to make it a little bit wider so that this video is nice and quick I'm not making it all look nice or even using the new response engine to its full potential I just want fields to date fields bigger and then need an input for my label and then a button to submit all okay.
Setting Up the Workflow
So create an event I would go add action data create new thing create event and then match up the field so start is going to be my date picker a finish is going to be my date picker be and then label is going to be my input a and so I can have more than one I'll very quickly in quick succession I'm going to reset the inputs when that button is clicked.
Understanding Time Zones in Bubble
So let's go for yeah the 5th of December and let's go for that time and then let's also say the 5th and go for slightly later in the evening just call this something like yoga now Bubble have been experimenting in their experimental releases with different ways of handling time zones but the kind of simplistic way to put it is that but when I create anything that's got a date with it it's going to in the database is storing as a Unix timestamp that's like a universal way that all internet applications tell time it's just the account of seconds or milliseconds from a date a long time ago you can look it up but the way that Bubble displays it is always in relation to what Bubble thinks the current users time zone is.
Adding Events to the Calendar
So when I add these here I am in GMT which also happens to be zero UTC and so this will be 530 till till 10 but if I was in a different time zone say UTC plus 2 to me it would still be 530 till 10 but if someone wants to look on that on GMT which would be two hours behind just in our example then it would show 330 till 8 so let's add the event in and we can see that it's added in yoga and it's reset the form let's just go for in fact based on the time of year let's go for the 25th in fact this highlights a quick little bit usability user experience that you can do so we can say initial content equals what's put in a plus on our so speed us along so now I can say 25th at one and now it fills in 25th at two and I'll school this Christmas lunch.
Conclusion
So there we have it very simple very quick way to add a calendar to your Bubble app I'm going to record a second video right away covering what happens if a user wants to drag and drop in the calendar app so make sure you've clicked subscribe make sure you've hit that Bell icon what all youtubers say so that you don't miss that and future videos.
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.