[Solved and works] Monthly Calendar, No Plugins, No RG, No Code (Bubble Only)

Questions
1

Hi Bubblers,

Im working on a monthly calendar that is created using bubbles current date/time and surprisingly Im almost there but am trying to figure out the best implementation to get the dates in the correct order of an actual calendar if anyone has any suggestions?

What I know so far:
The position of the first day of the month
0, 1, 2, 3, 4, 5, 6
Current date/time change date to 1 :rounded down to date (and can also extract the day to get 0, 1, 2, 3, 4, 5, 6)

How many days are in this month (and other months including leap years):
Current date/time +(months): 1 change date to 1 : rounded down to day +(days): -1 :extract date

We know we need 6 rows and we will have the 7 columns (0, 1, 2, 3, 4, 5, 6), so well need 42 positions.

I think the best way might be to somehow create a grid and have 7 checks:

Screen Shot 2022-05-21 at 4.22.44 PM
Screen Shot 2022-05-21 at 4.22.44 PM1170×1026 58.2 KB

If the 1st of this month has a day of 0 (may 1st on Sunday) we would know where all of the other days go and weather or not to show the dates 29, 30, 31

What has me stumped is how to reference R1, R2, etc…
I haven’t really tried option sets yet or maybe I could try storing the positions in the database and somehow reference groups in a grid? It would be great if you could enter positions dynamically (or at least I don’t know how).

Any ideas are greatly appreciated!

2

i have done this before cos i like the challenge.
i created all dates of next y Years using a backendworkflow with like 7 steps, no code needed.

for the repeating group
you need a field which says which week of the month it is
eg is jan 8 week 2 or week 1 of the month. *X

also you need to figure out how many weeks starting with monday that month has 4 or 5 or 6.

then you need option set of which day it is eg monday tuesday etc.

the problem is some years have 53 or 52 weeks and sometimes jan 1 is week 53 or 52 of that year so you need a conditional to solve that as it screws the logic from *X

i have a guide on this i plan to sell, will pm it to you once i get back on my laptop, you can be my proofreader.

1 Like
3

You can’t do this without a bit (or a lot) of code. (Also, doing anything with dates like this without at least a simple library like Luxon or Date-fns is absolute masochism.) And the RG is the only addressable repeater in vanilla Bubble.

There’s a reason that Calendar Grid Pro is a couple thousand lines of code (unminified) and uses a library (moment - though one could also get by with the much smaller and modern Luxon today).

4

I think I have an idea to solved it…?
The thought is to use the new responsive engine and hide groups, this should give me the flexibility I was looking for can’t believe I didn’t think of it until now :stuck_out_tongue: I’ll be back soon with the results and I appreciate the help (its a great forum!).

5

Yay Finally Solved!

6

This is an older post and the above was created with Custom States but I noticed there was a lot of additional load on the page because of so many custom states, so I now use Calendar & Timeslots Custom - BEP which can be found here