Calendar Colors

Hi there,

I am trying to change the color of my calendar events (Full Calendar plugin) when the event’s start sate/time < current date/time so that past events are greyed-out.

I have tried doing this as both a condition and a workflow (triggered on page load, or when condition is true) but because I am searching for a list of events and not a single event, Bubble shows an error message - which makes sense - Bubble wants this to be a yes/no, but it results in a list.

My question is, how can I automate this so that events change color when they have already happened?

Ps. I have a workflow setup so that when events are created, it creates hex codes in the database - one for when the event is full (changes to red) and one for when the event is in the past (color grey, as already explained) - the red change (which I’ve setup as a workflow) is working, because this is triggered by a button click - when a user signs-up to a specific event and it reaches maximum capacity. With this, I can just select “calendar’s current event” to give Bubble a clear yes/no result, but I would like past events to be greyed out without having to click anything - I’m sure this is possible, I just don’t know how! Please help! :slight_smile:

Thanks in advance,

@tomstone8 welcome to the community

Try checking the box “use a dynamic color for each event”

Set a condition in the calendars conditional tab “when this calendar’s current event date is smaller or bigger (whatever makes sense) to current date”.

Hi @cmarchan

Thanks for your response.

The problem is that the command “This Calendar’s current event” requires the user to select an event before it becomes the “current event”.

I’d like each calendar event’s color to automatically change when their start time is < current time and remain that color indefinitely.

What is now happening is that ALL the events are changing color when I click an event that is in the past and then changing back to my default color when I select an event that is in the future.


I worked with this element on an app about four months ago. I know it can be done :grinning:. Keep at it :+1:t2:

If I get around to it today (have a full one!). I will hop back into that app and look at how I structured things back then.

If you’re unable to solve this mobile mobile calendar plug-in, my plug-in absolutely allows you to this type of action. If you would be interested in giving it a two week trial, Before purchase, I’d be happy to let you check it out to see if it fits your needs! It is highly customizable and comes with a time slot generator, hey scheduler, and a schedule coordinator to pair up the times from two different schedule availabilities

1 Like

Thank you both.
I’m wondering if this is what custom events are for…?
I will persevere for now, as I’ve put a lot of work into my current calendar setup, but thank you for the offer @jared.gibb

I’ve solved it this way:
I have a data type of events (as Bookings), which have a field “event_color” for dynamic colours of each event on calendar. On page load I check if Bookings end date < Current date, if so, then change event color to any other you like (grey for ex.). So all booking which are finished will be shown in this color.