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

Tips
124

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

125

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:

Screenshot_032321_014426_PM
Screenshot_032321_014426_PM888×546 59.5 KB

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

1 Like
126

Hi ! How do you show Year and months only ?

1 Like
127

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
128

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:

129

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

スクリーンショット 2021-06-24 11.14.52
スクリーンショット 2021-06-24 11.14.521116×266 63.4 KB

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?

130

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.

131

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

132

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
133

@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)?

134

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

135

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!

136

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
137

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
139

Did you find a solution for this? I have the same issue and I suspect that the “current cell’s date” is in a different format which is why it can’t compare to your data field “Datum” as this is bubble’s way of saving dates. But I am not sure how to check or alter that.

140

PLEASE HELP!!!

Hi all, I managed to use the cal exactly the way I wanted it to function but now there is one issue and I wonder if anyone of you has or knows a good solution.
When displaying other data types in the RG with the constraint set to match the “current cell’s date”, it does not return the data type.

I suspect it has to do with the the formatting of the dates.
I can display the data type in the RG but if I set the constraint to match the dates, it doesn’t show anything. Anybody who can help?

Ambulio___Bubble_Editor

141

If I understand your question correctly it is not possible, because per the original poster’s intent the ‘calendar RG’ has a TYPE OF CONTENT set to “date”. Thus the content available is limited to RG’s date & index# etc. What I believe you need to do is: 1 drop a new element (ie text or input element) in the main RG cell 2 inside the element you just placed perform a SEARCH (ie Do a search for) for the “Type” of content you want displayed. 3 set the constraints of this SEARCH to pull the data you want to display. I note the SEARCH will have access to the “Current’s cell date” as a potential constraint if you choose to include it. The more constraints the better to reduce load on the database pull. That’s it.

I have done that successfully myself and it works as I expected. Let me know how it goes.

142

fyi it appears there was an earlier post saying the same thing

143

This was pointing me in the right direction! Thanks! It’s easy to overlook the right responses in a long thread like this.

It didn’t completely work but I played around with it and found a way.
So, in case anybody else runs into the same issue, this is how I set up the constraints:

Date/time>= Current cell’s date (Because the script by default saves it as 12:00am)
Date/time <= Current cell’s date +(hours) 23 +(minutes)59 + (seconds)59

That was giving me the right results.

What you said in the post before was also correct. That’s how I did it before and how I could figure out what the bug. I used a text that displayed the entire string + time, so I could compare it with my app data and find that it was the hh:mm differences.

I love this community.

I think this thread is worth making a tutorial or complete guide of.

144

Our expression is no longer displaying a list of dates. Is anyone else experiencing this?