Can I create a calender like this

Hey guys is it possible to make the default calendar look like this without CSS I know how to set it by date but how can I make it in time blocks or anything like this

1 Like

you can try to experiment with html within rich text element and then put it into custom collection:

Screenshot 2024-05-26 at 12.46.45 PM

2 Likes

Nix presented a nice solution, but do you need these cards to be clickable? Why does there seem to be a difference in the time slots between today and tomorrow?

1 Like

I think the reference is cal.com or calendly.com to quickly schedule a meetings. but as it is a rich text, you can connect an action to it to fetch the current time event and the cards can be different using the template with code, where numbers rely to other table with information

1 Like

Hi nix just seeing this and it’s very awesome, but I’m building a booking platform and would love to be able to customize the calender slots so it would need to be clickable

it’s actually style gotten from intro.co and nix is right those are the times the person is avaliable

I’m not thinking you should use the calendar component for that. I’d rather present them in a collection, but that also depends on how you want people to be able to book ahead, since that’s likely involving the use of a helper table.

Here’s a thread about preventing double booking that may help.