How to hide time from the Bubble calendar
In this Bubble tutorial we demonstrate how to remove the time stamp from calendar events in the month view using just a few lines of CSS.
Tired of ugly time displays on Bubble calendars? Learn the simple CSS trick to remove them entirely!
Customize your Bubble calendar like a pro: Discover how to add a calendar to your Bubble app and remove unwanted time displays with ease.
Elevate your Bubble app design: Master custom CSS techniques to fine-tune your calendar's appearance and improve user experience.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.