How to hide time from the Bubble calendar

Removing Time from the Bubble Calendar

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've responded to one of the comments we've had on a previous video about using the default calendar in Bubble and I'm going to demonstrate how you can remove the time. You know it's a little bit ugly. I wish that Bubble presents in a better way. For example just 3p meaning 3 p.m. but maybe you just want to get rid of it altogether. I'm going to show you how to do that in this video.

Accessing the Calendar Element in Bubble

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 gonna 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.

Exploring PlanetNoCode Resources

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. Many of our videos that we produced over the last few years are exclusive to members of our website planetnocode.com but let's dig into a very bit simple CSS that you can do use to remove the text.

Using Browser Inspection Tools

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.

Adding Custom CSS to Your Bubble App

So what I'm going to do is copy the class. Now there are two places that I can add custom CSS in my Bubble app. I can either add it in a page by page basis by using the page as 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.

Testing the CSS Changes

Go back to my preview, refresh it and it's not taking effect. That is 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.

Using !important in CSS

So I will touch on a couple of the points that I was leading on to. 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 precedent. The reason it's quite brutish and not 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 will probably get it working.

Targeting Specific Calendars with CSS

I'm going to show 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. 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 let's demonstrate that. Let me go back and let's imagine we have another calendar called Cal. We'll name it Cal2 instead and hopefully you'll see that the CSS is now not taking effect. Yeah there you go the time is back.

Conclusion and CSS Code

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 with Bubble. You want to hide the time on the calendar here is the CSS code demonstrated in this video for how you can remove the time from the calendar plugin in Bubble.