Forum Documentation Showcase Pricing Learn more

App 90% complete - just need help on a final calendar view

#1

Hey I was wondering if someone can point me in the right direction. I have nearly completed my booking app but it would really benefit from a timeline calendar like the example below

Where the users are on the left and their dates booked appear in a horizontal calendar view. I’m using fullcalendar at the moment, but if more than 3 people have booked the same day off it is hard to read

Can fullcalendar be modified to look like this or will I need to look at other options, such as a calendar made with repeating group?

Would really appreciate your help :pray:

#2

Have a look at this

I personally prefer to build it with repeating groups myself, because you can customize it better to your needs.

#3

Thanks for getting back to me @reger-alexander, I’ll have a go at the repeating group method and report back. Thanks

#4

I’m glad you got pointed in the right direction, @dudders9… I had forgotten to reply to your PM, but that’s where I was going to point you! (Note that you can easily modify that approach to feed a linear type of calendar like you are building!)

#5

Yeah the repeating group plus toolbox plugin is the way to go really. I’ve managed to use as a single calendar view, weekly view and yearly view, works nicely, though the more data present on page, there will be a slight lag, though for your example it will be quite light.

The calendar plugin is very basic, not much flexibility there tbh.

#6

Thanks @keith & @luke2 - Appreciate the help guys. I have copied the elements and the workflows from the forum and it already feels much more like what I am looking to build. Would you suggest some groups within the repeating group to pull the users dates in?

Adding 7 columns is great, but the only limitation is that the far left column for the user avatar/ name is much wider that the date columns and where bubble divides them equally - I can’t see how to do this.

Any tips would be great, thanks guys

#7

Good stuff.

Yeah with the width issues you’ve got with columns, I would suggest keeping that repeating group for the dates, so that can be split evenly, keeping the user’s name separate.

For instance, one approach would be to have a repeating group within a repeating group. So you’d have the main repeating group 1 column and say 5 rows, you can choose the settings that fit best, but something like full list would work, setting the data types. Then you’d draw out the repeating group inside that cell, set to 7 columns, 1 row and use this for the toolbox custom calendar. The calendar dates can use the conditions of the main repeating group’s data.

To be honest and not too meta, you actually might need a 3 levels of repeating groups, as you’d need to fetch the week e.g. Week 2 - March 2019 and this could use a customised version of the calendar toolbox, then you’d have the 2 repeating groups inside, as mentioned.

Sorry if this doesn’t quite add up, its difficult to summarise the implementation of this with just words.

Do you have the link to the demo ’ timeline calendar’ so I can see it in action?

#8

Hey @luke2

Sorry for the delay in getting back to you. I have tried to follow your instructions but I’m struggling. I have created a new app and shared the link below. If you get a chance would you mind taking a look and seeing if you can get it to work.

I have created new users and dates for you,

Editor = https://bubble.is/page?name=index&id=repeat-user-cal&tab=tabs-1

Live = https://repeat-user-cal.bubbleapps.io/version-test?

Many thanks

#9

Hi @dudders9

I’ve had a quick look and made some changes - converted to week view, applied some conditions to weekends. Still needs some work and I’m not sure from the 1st example you shared how other things work on the calendar e.g. the blue background date.

Also another tricky thing is to display the month coinciding/joined with the week number in the month e.g. Week 3 - March 2019, this may require some custom JS.

image

Good luck.

#10

Brilliant thanks @luke2 really appreciate you taking the time to help. Many thanks

#11

Hi @dudders9, did you manage to achieve what you wanted? I’ve been working on something similar.

#12

Hi, how did you set this up?

I’m working on something similar, but instead of names at the side, I wanna have products instead, then the calendar to see availability.

e.g instead of Sponge Bob, there be “Banans” then display availability from monday - sunday.

any suggestion?