3 ways to edit calendar events in Bubble.io

Adding Events to the Bubble Calendar

This is a very quick follow-on Bubble tutorial video showing you how to edit events using the Bubble calendar plugin. So as a quick recap I've got a page here running full calendar that's created by Bubble and in the previous Bubble tutorial video I showed you how to add events to the calendar and display the calendar on your page.

Modifying Events Through Dragging

So there's a few ways that you can edit an event in Bubble. Using this calendar plugin I can say modify through dragging start and end and it looks like I need to update my privacy rules to do this so I will go into events, find new role say user and then let's have current user is this event's creator and I'm probably hinting that I need to set autobinding in order to be able to drag and drop. Let's just turn autobinding on for all of those elements for now.

Enabling Event Modification

Okay so go back into design what have I done I've said enable modification through dragging end and start. So if I go on to debut and then go on to the 25th I have an event here called Christmas lunch and I can drag the event here and when I release it it updates the time and it saves that right away into my database and I can do the same thing with week view then I can drag it between multiple days.

Resizing Events

There is and you notice there is a little bit of a short refresh time and that's just Bubble writing the data to your app's database. Now there's one other thing I can do here which is modification through resizing. So I now have weirdly got my Christmas lunch, here it is, really late in the afternoon. Now Christmas lunch is a long ordeal but it's not that long so let me try resizing it. So drag it up there and now I can click on the bottom and I can drag it down and there you go it updates the time.

Editing Events with Popups

Now one final way I'm going to demonstrate how to edit an event and that would be what happens if the user just clicks on the event. So you can of course take them through to an events page you could do any number of things by building a workflow for when an event is clicked upon. But for now I'm going to show you how to do it with a pop-up and so this pop-up is going to be your type event and it's going to yeah data source I'm going to add that when I show the pop-up.

Setting Up the Popup Workflow

I'm just going to copy all of these into my pop-up. And then set them to fill in their initial content from the event that I'm going to store in the pop-up. So then this would be current view, events finished, event label and then this is going to be saved changes this time and then my workflow goes something like this make changes to a thing, parent groups, pop-up events just to be sure and then start equals now I've got loads I've got four different date pickers so it's C and D if I was not rushing through this I would label them properly so this would be date picker C, finish date picker D and then label is input B, input let me check that again should be labeling things correctly input B, input A is there.

Finalizing the Event Editing Functionality

I then want to dismiss the pop-up by hide, pop-up and lastly I need to tell Bubble to do something when the event is clicked and so I believe that that would then be found in here here we go when events calendar event is clicked I would show pop-up and I need to display data in it which would be this calendars current event that's the one that's been clicked on so let's test that. So if I click on Christmas lunch it then loads up the details of Christmas lunch and I can say actually Christmas lunch is starting an hour earlier save changes and you can see that it's been updated if I go on to the day view for the 25th and you can see it's now gone up to 11 and if I click on it here again I get this.