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

[kristerbagnkop]

Amazing ! thanks - Sorry, if I wanted that to work on the weekly view, how do I need to alter that code?

[shu.teopengco]

If I copy the “Main Calendar” and paste it into my app, will it work flawslessly? Or I have other things to do?

[andreagosta]

Hi Nic, I am receiving the same error, with the day of the calendar empty.

I also receive this error code:

The plugin Toolbox / element Expression threw the following error: SyntaxError: Invalid or unexpected token
at eval (PLUGIN_Toolbox-update–Expression-.js:1:73)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/2e7badfa8a9729c34055cf622e91c7c92b3d8d710b990b61f63cfbe7b154d3a4/xfalse/x5:18:444777 (please report this to the plugin author)

How can I fix that?

Thank you so much
Andrea

[andreagosta]

So far I have tried different code and this looks working perfectly. Thank you guys

[CoachLani]

Did you ever get an answer on how to display the weekly calendar to start on the current week (and not the first week of the month)?

[paulogustavopeixoto]

This thing is just amazing. I believe I just found a way to block date ranges in this custom calendar. Very useful for me. A big thanks. Zero cash spent is a plus

[darius]

Hi @maxime.rb

I’m curious whether you managed to do this in the end?

Thanks!

[fredrik.forstbach]

Just in case somebody needs a Weekly View - starting monday - with 5 days

• starting mondays (see first bold text) -> this will change the first day of the week
• with 5 days (see second bold text) -> changing this value will change the number of days

hope it helps, thanks for sharing this tutorial, very helpful!

this is the code
function getDaysInWeek(e,t){var a=new Date(e,0,1);a.setDate(a.getDate()+7*(t-1));var D=a.getDay()-1;for(s=0;s<D;s++)a.setDate(a.getDate()-1);for(var n=new Date(a),r=[],g=[],s=0;s<5;s++)r.push(n.getDate()),g.push(new Date(+n)),n.setDate(n.getDate()+1);return g}

[ke3vi1nckl]

Hi there,

This is an example how to set the state weekOffset to 0 without having to update anything in the javascript. Hope it helps!

[mauraduquette]

Does anyone have help to offer for newbies trying to replicate the basic funtioning of say Full Calendar?

I have followed the original tutorial and managed to build the basic calendar.

However I need help with creating/displaying events.

Can anyone help?

Thanks!

[jboc]

Hi,

Thank you for sharing
Is somebody has solved the issue with the date picker for the week calendar ? when I select 01/07/2021 it shows me the last week.

Kinds regards,

[bryce1]

Did you ever figure out a way to keep events on the same line (or RG Index) and clickable??

[srad17]

Hey @joe.brown - did you ever find a fix for this? I’m dealing with the same issue where my numbers didn’t show correctly.

[Alix75]

Hi, I need help to move my events with a drag n drop group,
I have linked my google calendar data with my calendar but I can’t find how to make my event change date when drop in a “drop area” over another date…

[MvD]

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!

[fza]

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:

Display hour blocks in allDay-slot for in a repeating group using toolbox

I am trying to build a calendar from scratch without the plugin, by displaying days in a repeating group using Toolbox “expression”. [Screen Shot 2020-10-22 at 1.22.04 PM] Now I added a new repeating group inside the cell of the previous repeating group, to display available hour slots of the current day using Toolbox again. However, I am having troubles finding the JavaScript Expression for this. [Screen Shot 2020-10-22 at 1.25.00 PM] I have been trying different ones, I am not a coder, …

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

[n.zavgorodnyaya]

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

[nomads32n]

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

[boston85719]

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.

ScheduleMe - Calendly Clone Template for Bubble

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

On other custom calendars in the template I use different conditionals

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.

[gf_wolfer]

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