Thank you to everyone who leaves a comment, likes and subscribes. It really does make a big difference if you like and subscribe to our videos because in this video I'm responding to one of the comments we've had on the previous video about using the default calendar in Bubble. And I'm going to demonstrate how you can remove the time.

The Problem

You know, it's a little bit ugly. I wish that Bubble would present it in a better way. For example, just 3P, meaning 3 PM. But maybe you just want to get rid of it all together. I'm going to show you how to do that in this video. So let's go into the editor and we'll just have a look at the calendar element. Bring up the inspector. Here we go. And I'm going to have a quick skim through here and you can very quickly establish as I thought there isn't a way, there isn't like a checkbox to get rid of the time. So I'm going to show you a quick bit of CSS that you can add to your Bubble app that's going to get rid of the time.

More Bubble tutorials

But before I do that, if you're learning Bubble, you really should check out our website, planetnocode.com. We've got hundreds of Bubble tutorial videos, more than you can find on our YouTube channel. of our videos that we've produced over the last few years are exclusive to members.

Using the browser developer tools

But let's dig into a very bit simple CSS that you can use to remove the text. So back here and I'm using a browser that's built with Chrome which means that you can copy along here I'm just going to right-click and say inspect and then it brings up the window here and I can see that there is a class called fc-event-time, and that is a way that the web browser and the code are communicating to each other to say this is where all the times are contained in the page, because within CSS you've got classes and you've got IDs, and because it's a class I can infer from that that it is applied to each of the times that each one is going to have this same class here. So what I'm going to do is copy the class.

How to add CSS to Bubble

Now there are two places that I can add custom CSS in my Bubble app. I can either add it in on a page by page basis by using the page's HTML header or, let me close that one here, or I can add it across my whole app. So it really depends whether you want this to take effect on one page or more generally across your app. Let's just add it into the page here. So I open up a style tag, and I close my style tag. Whoops! And my CSS goes in here. So in order to declare instructions for a class, we use a full stop, and I'll paste in the class name. And then, what I'm changing goes in between curly brackets. And so I'm simply going to say display none. Go back to my preview, refresh it. And it's not taking effect. That's because basically what I'm demonstrating here is like a brute force attempt. Bubble wants to show the time. The CSS, the HTML is set up for showing the time. So I have to do something which is... Oh, I've got a typo there. Maybe that's it. If this doesn't work, I'll have to use 'important', which I will still mention. Okay, it worked. It was because of a typo. I like to keep my videos like this because it just demonstrates some of the easy mistakes to make. So, I will touch on a couple of the points that I was leading on to.

Using !important in CSS

One is if you make custom changes to the CSS in Bubble and it doesn't take effect, then you can use 'important'. And this really is, I mean, it's not like great practice to do this, because you're basically saying, "Ignore anything else that is said about this class here. Make sure that this statement here, which is to display 'none', that one takes precedence." The reason it's quite brutish and not a good thing to do is, well, what if you end up having more than one importance? I mean, there is a hierarchy within CSS, it just becomes a mess. Basically, if I get to a point where I'm stuck, I'll whack 'important' in there because that'll probably get it working.

How to only target specific calendars

I'm going to show you something else that we can do with this too, which is what if I've got multiple calendars and I only want to target this calendar here. So, I'm going to add in an ID, and I'll call this Cal1. Let's now add to the CSS so that it only targets this calendar. So, an ID in CSS, you use a hash sign. And so I'll do hash sign Cal1, then I declare the class, and so now this will only take effect within Cal1. Let's test it out. Okay, now you won't notice any difference. And in fact, to demonstrate that, let me go back and let's imagine we have another calendar called cow, we'll name it cow2 instead. And Hopefully, you'll see that the CSS is now not taking effect. Yeah, there you go, the time is back. So that's a very quick introduction for how you can use a few lines of CSS to get around some of the rough edges of Bubble. You want to hide the time on the calendar? Here is the CSS code demonstrated in this video can remove the time from the calendar plug-in in Bubble.