Forum Documentation Showcase Pricing Learn more

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


#21

All fixed. The issue was we were using a ‘Display Data in Group’, when we should have used a Display a List in Repeating Group’


Calendar not working well in Hebrew \ RTL
#22

Sweet! Thanks! I really appreciate your help


#23

Awesome calendar! Thank you!
Tell me how to make it the beginning of the week from Monday?


#24

Did you find out how you could let it start on Monday?


#25

Unfortunately no


#26

Where can I find this?


#27

You can use this tutorial to create a custom calendar.


#28

How can i do this?


#29

@codurly Hey Nic!

I can’t seem to get the numbers to show correctly. What would be the typical errors for this?


#30

Hey, Can you share your project through this forum or PM and ill take a look :slight_smile:


#31

Im not sure what you are trying to do… just follow his example of building the cal… after that you can add the drag-n-dop function to it by placing the components in the right groups and adding the right workflows as explained on some of the drag-n-drop posts


#32

Another way is to take “Items From No. 2” as a data source for the calendar repeating group.

IGNORE THE BELOW!!! It causes error. Apologies for misinforming.

In case you still need to make the Calendar star on Monday

In the below I put “-2”, and it seems to do the trick.

I indicated where with /////

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


#33

Hey guys, @gf_wolfer @codurly @

A quick one I am getting stumped on.

How can I show the yellow day marker when I click a day and hide all other markers?

Preview: https://calendardaymarker.bubbleapps.io/version-test?debug_mode=true
EDIT: https://bubble.is/page?name=index&id=calendardaymarker&tab=tabs-1


#34

I have edited it for you, have a look.


#35

Bloody Legend!

I have changed it to preview to lock it in eternity.


#36

I’ve been tinkering around with this calendar and was thinking would anyone be interested in custom calendar tutorials or something on that line.

Example:


#37

Hey, is there anyway to get the week to start with a Monday instead of a Sunday?

tried with -1 to -2, but that messed up July and April month.

suggestions?


#38

Use this code to start it on a Monday:

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

#39

I have tried that aswell, but it does not work.

In the first picture that displays June you can see 8th of July is in the right place, but when I switch to July, 8th of July is a “monday” instead of a sunday.


#40

This is fantastic. Is there a way to edit this so that it shows a week’s view (1 row, 7 columns) instead of a full month?