Full Calendar is User-specific colors

fujiwara.enc · 2024-10-15T06:52:27.491Z

Hello,

I am trying to create a feature similar to Google Calendar using Bubble, and currently, I have designed it like this.
Please refer to the attached file “Calendar Image”.

At this point, I would like to change the display colors as follows:

My own schedule should be in blue,
Keiko Tanaka’s schedule in red,
Noriko Ito’s schedule in green.

How can I achieve this?

カレンダーイメージ2817×1408 120 KB

tunacardak · 2024-10-15T07:21:40.616Z

Hello, welcome to the forum I think the most performant way is adding color column(text) to the events table and then choose Use a dynamic color for each event in the calendar properties panel and select the color column

Editor

Bubble

Bubble Editor - help

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Preview

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

fujiwara.enc · 2024-10-15T08:17:41.368Z

Hello,

Thank you for your response.

I was able to implement it successfully. I appreciate your help.

I have another question: I would like to allow users to change the event colors, similar to Google Calendar, by displaying something like a color palette. Does Bubble have any plugins for this?

tunacardak · 2024-10-15T08:31:55.565Z

We don’t need a plugin for this. Let’s take it step by step.

How are you writing the color data to the events table? Can you show me that please?

fujiwara.enc · 2024-10-15T08:55:59.906Z

Got it.

I’ll provide you with the screenshots of the table and data I am currently using for testing.

Since some parts might be difficult to understand in Japanese, I will include a few additional notes for clarification.

User Table2626×1177 140 KB

event color [text]
name [text]

event Table2574×1669 192 KB

color [text]
title [text]
memo [text]
created_user [User]
end date and time [date]
all day [yes/no]
start date and time [date]
private [yes/no]

user Table Data3598×883 201 KB

event Table Data3646×1224 302 KB

tunacardak · 2024-10-15T09:28:51.873Z

Looks great, thank you! When creating an event, you can pull the color value from current user -> color. If we add an input on a page, like in user settings, users will be able to modify that field. At this point, you can use a color picker plugin. I like this one, but you can choose any.

You’ll need to add this logic:

When “Save” is clicked →

Bubble

Templates for Bubble

Buy and sell Bubble templates to speed up app development. Bubble is a visual programing language that lets you build apps without code.

I hope I explained everything clearly.