I’m building a workout tracking app and I’m planning a feature that will show a daily timeline that will show different activities under the correct time of day that they took place (inspiration in the pic below, in a baby tracking app)
I wonder what is the best way to dynamically position an element for this feature and would love some inspiration if anyone worked on something similar
Currently I’m planning it this way:
Build a repeating group for dates, each row for a different day
In each row there will be a fixed group, fully stretched. It’s width will spread Under the time of day titles like in the picture
Each activity in the day will be positioned dynamically (using a plugin) with dynamic X values relative to the amount of minutes that passed since the beginning of the day
How does that sound? Trying to find the best solution
It is possible, but becomes a mess and impossible to get right if you need overlapping events and do not restrict the number of events shown for a specific date/time combination using native Bubble features only.
Needs a lot of conditionals and elements that may or may not be made visible based on the conditionals. I built one and never implemented it in the app as overlapping events causes issues.
You could maybe get a plugin developer to build something for you using traditional code I bet. Contact any of the developers of any of the existing calendar plugins.
As you said, a repeating group for dates, each row for a different day.
In each row, there is another repeating group for each hour (0… to 23, or in this case 0…12 and another 0…12)
Each cell in the inner repeating group will change color or icon depending on current cell’s date (outer repeating group’s) and current cell’s hour (inner repeating group’s) has something to display.
In this way, you don’t need to worry about the length of the different activity. Because if that specific hour is intersecting with an activity somehow (meaning the start hour of the event + duration of the event falls under that specific hour), you just color it green, for example.
The location for each activity can be only accurate to the hour where it occured and not to the minute
It takes a lot of processing: for each hour of each day there should be a “search for” to get the condition right
I offered the solution in the first post in this blog because I believe it can solve both of these problems if possible (position will be accurate for minute of day and there will be way less processing needed)
It is possible, but becomes a mess and impossible to get right if you need overlapping events and do not restrict the number of events shown for a specific date/time combination using native Bubble features only.
You are right, in this solution I will need to limit the number of elements that might be presented in each day because I count on the fixed group propreties (using the X values) and therefore cannot count the a repeating group to make “inifinite” elements for me… but thats ok I think, I can make around 10 elements and I think that will be enough either way
Needs a lot of conditionals and elements that may or may not be made visible based on the conditionals. I built one and never implemented it in the app as overlapping events causes issues.
I will need for each elemnt to create a workflow that position it inside the fixed group relatively to the number of minutes that passed since the begining of the day. This requires:
Dynamic position workflow for each element (7 rows X 10 elements = 70 workflows for each load of this page)
Another plugin to trigger the workflows inside the repeating groups
I wonder if this can be saclable…
You could maybe get a plugin developer to build something for you using traditional code I bet. Contact any of the developers of any of the existing calendar plugins.
Any reccomendations on who should I try contacting?
