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.

Modify through drag and drop

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.

Update Data Privacy Rules

And it looks like I need to update my privacy rules to do this. So I will go into events, define new rule, say user and then let's have current user is this event's creator. And I probably hinting that I need to set auto binding in the order to be able to drag and drop. That should turn autobinding on for all of those elements for now.

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 day view and then go on to the 25th, I have an event here called Christmas lunch. 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 and then I can drag it between multiple days. There it 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 database.

Modify through resizing

Now there's one other thing I can do here which is modifications 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.

Modify with pop up

Now one final way I'm going to demonstrate how to edit an event and that would be what happens if a 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 data source... I'm going to add that when I show the pop up, 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 finished label and then this is going to be save changes this time. And then my workflow goes something like this, make changes to a thing group, parent groups, pop up events just to be sure and then start equals. Now 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 labelling things correctly. Input B.

Input A is there. 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 would then be found in here. Here we go.

When calendar's event is clicked, I would show popup and I need to display data in it, which would be this calendar's current event. That's the one that's been clicked on. So let's test that.

Testing

So if I click on Christmas lunch, it then loads up the details for 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 into the day view for the 25th, you can see it's now gone up to eleven. And if I click on it here again, I get this pop up. It populates with the event, I can make changes to it and I can save it.

So there you have it 3 different ways to edit events in Bubble using the calendar plugin by Bubble.