[HOW-TO] Create a custom Calendar using repeating group

Hello,

I am stuck on how i can display the correct hour filled in and stored in the database.
Can somebody help me or point me to the right place?

I don’t see the unique id for the hour_registration database, only see current cell or index.

The idea here is to store the daycare hours per date and child.
Input is working, but now i want to retrieve the data to show the al ready filled in hours.

Thanks for any help!

Thank you so much. This helps a lot.

At the moment I am having trouble finding the Toolbox Expression to display hour slot in the repeating group of Days in Week.

This is my post, for more information:

Please, let me know if there is way to display hour block of the day. Or there is an alternative for that without using Toolbox.

Thank you

Hello! I would be happy to have such tutorials! Also I’m interested at horisontal weekly scrolling calendar. Like in mobile apss.

How do I display only 31 days of a calendar and not a preview of the next month?

That depends on what setup you using to get the calendar days in the first place.

I have things setup in my template on the ‘Google Calendar Clone’ portion that shows the full page calendar to omit any entries or rows that are not part of that month…so if month only has enough days to fill 5 rows, it shows 5 and if 6 are needed it shows 6 rows.

I only use free plugins or karmaware plugins in my templates, so in this case I am using the CalendarTools plugin to get the dates.

Here is the conditional I use to hide or show the 6th row

Screen Shot 2021-03-23 at 1.33.54 PM

On other custom calendars in the template I use different conditionals

Screen Shot 2021-03-23 at 1.36.01 PM

Screen Shot 2021-03-23 at 1.35.18 PM

Different situations require different setups and the starting point is to know how you are getting the dates…then the conditional requires to know how to ‘hide’ or ‘show’ the dates.

I was hitting this issue before as well and you can use conditionals to try and do this.

To come up with a good solution though I added a Calendar Dates element in this plugin which retrieve the Dates up until the end of the month so that you can use a ‘Full List’ repeating group instead of a set number grid and having an extra row sometimes.

To see what I mean checkout this Editor and scroll closer to the bottom and it shows everything:
https://bubble.io/page?type=page&name=topcal-example&id=topshelf-elements&tab=tabs-1

Thanks will try this out. Was using the calendar in the calendar page of your demo.

Right, that calendar doesn’t leverage the same Luxon.js library to recognize when the end of a calendar month is.

That said there is a way you can do it, it’s not the prettiest and could have a slight delay compared to the current calendar speed, but filtering the dates the toolbox returns like this could work:

Then you can just make the calendar or 4 rows and make it ‘full list’ and it will expand when needed

1 Like

Hi ! How do you show Year and months only ?

1 Like

thanks, everyone for your responses, I’ve recently come across a guide on creating custom calendars using a variety of APIs and implementing it in any app, you might want to check it out.

1 Like

Hi @eongering , How did you put the events in particular date of the event? can you help me? thats my problem now. Thank you :slight_smile:

hi @codurly,
I copied and past your editor code, but an error appers in the Chrome console.

function getDaysInMonth(month, year) {
var date = new Date(year, month, 1);
var days = [];

var lastDay = new Date(year, month, 0).getDate();
for (i = date.getDay() - 1; i >= 0; i--) {
	days.push(new Date(year, month - 1, lastDay - i));
}
while (date.getMonth() === month) {
	days.push(new Date(date));
	date.setDate(date.getDate() + 1);
}

var date3 = new Date(year, month + 1, 1);
for (i = days[days.length - 1].getDay(); i != 6; i++) {
	days.push(new Date(date3));
	date3.setDate(date3.getDate() + 1);
}

for (i = days.length; i != 42; i++) {
	days.push(new Date(date3));
	date3.setDate(date3.getDate() + 1);
}
return days;}   getDaysInMonth( DYNAMIC DATAS,DYNAMIC DATAS);

Could you give me advise how to remove the error?

I can’t get this to work with the code provided in this post, or the code from your example project. Nothing shows up in the cells with the text that’s supposed to be showing the current day’s date.

I’d like to do something like this but for a daily view showing 30 minute intervals…so lost.

Where did you put this code to make it work with the Calendar Tool?

I’m loving this plugin so far!
Question:
How would I create an event that would go on every Tuesday for a certain date range?

For example:
Every Tuesday for the next six months I have football practice (say September to February).

Im thinking I need to store a date range (2 Input box’s or 2 date picker’s and store these dates in the database (From / To)) Im just not sure how to parse out each Tuesday from that date range?

Anyone have any ideas?

One thought I had after many…
I can get the start date (the first date of practice), then add 6 days to that date, which will give me the next week, possibly perform some kind of an array to run through whatever six months worth is? How to perform this, maybe a custom state (so that its not going to the database) to get the results of each week. Maybe then store the weeks received to the database but have absolutely no idea how to get these back into the calendar?

1 Like

@codurly thank you for sharing the knowledge. I was stuck, so had to open up the editor and made sure I picked all the bits and pieces from there. Thank you.
How can I add this calendar to a repeating group of events- Each event has its own calendar (thus calendar)?

Hello,
Thank you for the feed !
I’d like to get all the dates between a date range in order to send the list to a repeating group.
I’d like to have a planning with all the days of my date range previously picked up.
Does someone as an idea how to do so ?
Many thanks

Hi,
I read the previous answers and finally figured it out.
Here’s the JS code I wrote :

function getDaysInMonth(mStart,yStart,dStart,mEnd,dEnd) {
var month = mStart-1;
var a=new Date(yStart,month,dStart),D=[];
for (;month<mEnd-1;){
for(;a.getMonth()===month;){
D.push(new Date(a)),a.setDate(a.getDate()+1);
}
if (month==11&mEnd!=12) {
a.setYear(yStart+1);
month=0;
a.setMonth(month);
}else{
month++;
a.setMonth(month);
a.setDate(1);
}
}
console.log(a);
for(;a.getDate()<=dEnd;){
D.push(new Date(a)),a.setDate(a.getDate()+1);
}
return D;
}

I hope it will help you as well!

Hey everyone! Is this possible to implement this calendar not with “back” and “next month” buttons, but with a dropdown like “choose your month”?

Could someone help? :slight_smile:

1 Like

Thank you so much for this tutorial. I tried the other codes listed here for starting on Monday and they didn’t seem to work. Here’s one I found that did, in case this is also happening to you.

function getDaysInMonth(e,t) {
var a=new Date(t,e,1),D=[],n=new Date(t,e,0).getDate(),b=a.getDay();
if(b == 0) b=7;
for(i=b-2;0<=i;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(

It would be awesome to have a “start on Monday” example on the demo page for us Europeans :wink:

4 Likes