Add a calendar to a Bubble.io app

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.