Weekly calendar for shift planning with color coded cells - possible with no code?

umit1 · 2021-10-21T18:55:16.832Z

Hi bubblers,

I have a project and would like to understand if it’s possible to solve a it without any javascript.
I tried to solve this with RGs and some of the plugins but nothing really gets to what I’d like to do.

I basically want to create kind of a calendar that shows shifts - not events with exact hours.

It should look like this:

A row represents a user
A column represents a day (starting from Monday)
Each cell should represent a specific day and be split into 2 smaller cells
– one for morning shifts, one for evening shifts

If a user now has a morning shift on a given day, it should be color coded.
Every user should have a dedicated color with their respective row and the cells should be colored in the dedicated color of the user.

Anybody with good ideas?
Can this be solved without code or do I need to implement JS?

Andrew.Vernon · 2021-10-22T19:22:49.245Z

Hey @umit1

Thanks for the post and cool question!

Full disclosure - I haven’t built this sort of thing, but I would imagine it’s definitely possible. I would lean towards a series of repeating groups as well although, you might be able to do something similar using AirCalendar as they have some resource scheduling features that you might be able to get to work how you’d like. In fact, there are quite a few calendar plugins that might be worth looking through to see if there’s something that can do what you’re looking to accomplish.

The tricky part with building the repeating groups yourself is doing it in a way that lines everything up well. What I would recommend is to build it with one user, get that row working how you want it and then throw that entire group inside of a final repeating group of users.

For instance, a group, with it’s content type set to user. Inside that group, a horizontal repeating group that shows a week’s worth of days. Inside each day, two groups with conditionals to change their color IF search for shifts where user = this user, day = this day & timeframe = this timeframe 's first item is not empty.

Give it a try and don’t hesitate to reach out if this kicks up any additional questions. You can reach us directly at Support@Bubble.io

umit1 · 2021-10-27T13:55:59.111Z

Hi Andrew,
thanks for your response. I found a way to handle it.
In case somebody else comes to this thread, this is how I solved it.

used the toolbox plugin and added javascript code
I did a repeating group for “users” and nested another repeating group into it that is of the type “date”
I added a little group to the first RG of users and made it to be of the the current cell’s user - this tiny group is invisible
If I now put anything into the nested RG with dates, I can reference both to the current cell’s date and constraint it to be for the user taken from the invisible user group.

This way, I built a calendar that can display events that are linked to the user of the current cell. It also starts from Monday.

Whoooop whooooopppp

Andrew.Vernon · 2021-10-27T17:10:38.878Z

Well done @umit1 and thanks for the update! So glad to hear you were able to get this up and running.

Don’t hesitate to reach out if we can assist with anything else → Support@Bubble.io

system · 2021-12-30T18:55:29.106Z

This topic was automatically closed after 70 days. New replies are no longer allowed.