Is Full Calendar not giving you enough? Want to have complete customization over your Calendar?
Look no further! I would like to show you a brand new way to create a calendar in your Bubble App using a repeating group and a bit of Javascript.
EVERYTHING IN THIS REPEATING GROUP IS CUSTOMIZABLE
From the text colors, size font, everything is completely customizable just like any other repeating group.
MAKE SURE YOU ARE RUNNING ON BUBBLE ENGINE V1 OR ABOVE
Create a repeating group with 6 rows and 7 columns, set its Type of Content to āDateā
Create an element state on any element and call it āmonthOffsetā, set it to a number
EX:
Create 2 buttons/icons that can be used to change month.
Start/Edit the workflow of the two icons to the following:
Set State of Element with the monthOffset state, Custom State: monthOffset, Value: Elementās monthOffete (+/- 1 depending whether the button goes forward or backwards)
EX:
Install the āToolboxā plugin from the Bubble plugin store
Place an Expression onto the page you want the calendar on
Paste this code into the expression:
function getDaysInMonth(e,t){var a=new Date(t,e,1),D=,n=new Date(t,e,0).getDate();for(i=a.getDay()-1;i>=0;iā)D.push(new Date(t,e-1,n-i));for(;a.getMonth()===e;)D.push(new Date(a)),a.setDate(a.getDate()+1);var g=new Date(t,e+1,1);for(i=D[D.length-1].getDay();6!=i;i++)D.push(new Date(g)),g.setDate(g.getDate()+1);for(i=D.length;42!=i;i++)D.push(new Date(g)),g.setDate(g.getDate()+1);return D}
getDaysInMonth([MonthAsNum],[YearAsNum]);
Now you need to edit 1 part of the code. Go to the part where it says ā[MonthAsNum]ā delete that and replace it with the following Bubble expression: Current/date time +(months): *Element*'s monthOffset: extract month - 1
Then you need to replac ā[YearAsNum]ā and replace it with the following Bubble Expression: Current/date time +(months): *Element*'s monthOffset: extract year
Now set āResult Typeā to āDateā and Check the box next to āResult is a listā as below.
Ex:
ALMOST THERE. Now you need to set the Data source of the repeating group to: Expression Aās Value List (Expression name can be whatever you have it set to)
YOU ARE ALL DONE! However, if it didnt turn out the same, or you want to see from a live example. Click here to see an editor of a working version.
Thank you for reading, if you have questions or issues, reply to this topic!
nevermind i got it working somehowā¦ something must have been wrong in the code i guess
BUTā¦ the month of FEB does not loadā¦ it does not work on yours either. I dont know if that has to do with it being the previous month from the current date OR just something elseā¦ but yea? Any ideas on why FEB is just being skipped?
Update: Your demo and my reproduction of your demo are actually skipping over multiple months AND freezing on other months. Are you seeing this?
I noticed it is actually skipping because it is looking for April 31st and the skipping is only happening because today is March 31st. Since April 31st does not exist (only 30 days in April), the month will not show.
There is a discussion here and I am sure someone smarter than me will be able to figure it out for our code.
Yep, I noticed it is skipping over months and freezing. This is something that wasnt happening before and must be because it is the 31st.
EDIT:
Nothing is wrong in the custom javascript, it is an error on how my bubble determines the current month to show. The fix seems to be extracting the month before adding the offset. I will update my tutorial soon.
This is nice looking calendar but i did run into an issue with this too that I canāt solve. When I click a date I open a pop up window with repeating group for events in it. I just donāt know how i can filter those results by day in that case?
This is likely happening as you are trying to say find events whose date = current cellās date. This will only work for events that occur at the exact same date AND exact same time of day.
So when you display the Events in the repeating group, you will need to make sure the Event falls within the date range of that specific day
Here is a quick example of when a date is clicked on the repeating group calendar:
Display List of Events in Repeating group
Source: Do a search for events
Constraints
Start date/time > current cellās date:change hours to 0 change minutes to 0, change seconds to 0
Start date/time < current cellās date:change hours to 23 change minutes to 59 change seconds to 59
I think my issue it that my source for repeating group calendar is date and for my repeating group eventās itās events but I canāt make filtering work based on the parentsā cells data because itās not the same source.
When back workflow is run from the current month, the calendar does not change. (Ie. if current month is March, and back arrow is clicked, no visible changes to February. But another click advances to January.
When going forward from January, February is completely skipped (no second click needed).
In that Action in your screenshot, For the āElementā field, set it as a the Repeating Group in your popup, this repeating group should have the data type as Event
Then for the the āData to Displayā field put: Do a Search For Event
In this search, use the constraints I mentioned above.
For a link to the editor, you will need to set your application rights to allow people to view it (under the Settings tab), and just copy the link in your browser while you are on the page in the Editor
Awesome news! Bubble has updated their engine to account for the months not having a date. This was the only problem with creating a calendar with native bubble but it appears that is no more.
IF YOU ARE GOING TO USE THIS PLANNER BE SURE YOU ARE ON BUBBLE ENGINE V1+
You can do this by going into your settings>versions
