Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Add a calendar to a app

In this 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.

Adding a calendar to your Bubble app is really simple and it's really 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 got used by hundreds of thousands of apps, literally.

Pick a calendar plugin

There are other calendar apps available which add more features, ones by like Zeroqode for example. But this is going to get you a simple calendar app with drag and drop events in Bubble.

Create an Event Data Type

So we install it and go back to our page and let's add in our calendar. 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.

Event Data Source

We also need a label to display on the calendar. Do a search for, of course, type text and yeah, I think that will get us started.

So now I can fill out the fields in the inspector here. So 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 search for Event and then I have a starts field and finish field and I need to have a caption and this is my label. And then we have additional features such as modifying by resizing, by dragging. We might touch on that in a future video. Let's change start of the day to Monday because that's just how it works in my part the world. And let's also make our width, say 900 fixed just so there's a bit of space and let's preview.

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.

Date/Time Picker

So I need a date and time picker. So 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 responsive engine to its full potential. I just want two fields, two date fields that bit bigger and then need an input for my label and then a button to submit it all.

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 B and then Label is going to be my input A. And then so I can add more than one very quickly in quick succession, I'm going to reset the inputs when that button is clicked.

So let's go for the 5th December and let's go for that time. And then let's also say the 5th and go for slightly later in the evening. Let's call this something like yoga.

How Bubble works with different timezones

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 in the database, it's storing it as a Unix timestamp. That's like a universal way that all internet applications tell time. It's just an account of seconds or milliseconds from 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. So when I add these here I am in GMT, which also happens to be zero UTC, and so this will be 5:30 till 10. But if I was in a different time zone, say UTC plus two, to me, it would still be 530 till ten. But if someone wants to look on that on GMT, which would be 2 hours behind, just in our example, then it would show 3:30 till 8.


So let's add the event in and we could see that it's added in yoga and it's reset the form. Let's just go for that based on the time of year.

Let's go for the 25th... And in fact, this highlights a quick little bit of usability user experience that you can do. So we can say initial content equals what's put in a plus 1 hour. This will speed us along.

So now I can say 25th at 1 and now it fills in 25th at 2. And I'll call this Christmas lunch.

Okay, 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.


Latest videos