I wish everyone success in their Bubble io journey.
My question is this. There is an online education platform called Preply.com where they can choose lessons from the teacher they want to show and make an online program. I will show a few sections from this page in the picture below.
There is a calendar that appears in the management panel of the sections below and you need to click on the calendars in this calendar to assign the sections to the hour and make togetherness lessons. Of course, you can only do this if they have taken lessons from you before.
In short, can a calendar be created visually and functionally like in the picture with Bubble io?
For the thing that you are looking for I think there are some plugins and templates out there. Something like “Full Calendar Suite” or some such names are there.
In my use-case what these plugins do was not sufficient.
Here’s how my screen looks like which was for my use-case (i.e. In rows I wanted resource names, in column I wanted hours in the day. I wanted calendar just for a day. I also wanted ability to put some labels and colour codes depending on some conditions and other such functionalities).
I managed to achieve it via native Bubble functionalities, but with lot of hacks and somewhat unoptimised code. Also there are some compromises on how it looks visually. It was a lot of work though for me. Not easy to share any quick guide.
I would recommend using full calendar. It will take some JavaScript and a bit of time but when you have a basic setup finished it is very easy to add functionality since full calendar already has a lot of calendar functionality ready to go. I just finished integrating full calendar in my app and it is way better than what you can achieve with bubble elements only. Google full calendar js and check their docs and examples.
thank you very much for your reply sir. For now another question came up my mind. How can i add custom codes on bubble i mean how did you add codes on full calendar on bubble?
Hi! You will need to use toolbox plugin from misha so you can run JavaScript functions from workflows, for the JavaScript itself you will use an html element on the page to hold the functions you create. And last on the page itself you will have to add the full calendar script.
I am not able to provide a manual for this since I’m off working for the next days and it is somewhat time consuming but there is a lot of help in the forum, and ChatGPT can help you some of the way as well if you are not familiar with JavaScript.
