Vanilla Calendar or something different?

DameStJohn · 2024-08-06T20:56:39.504+00:00

I started building a web app with Webflow and Wized and with some time I was able to configure a unique Calendar UI. I'd like to rebuild this in Toddle. My particular use case requires:- a full calendar with selectable dates (past, present, future)- a full calendar with selectable dates (present and future)- a week (horizontal) calendar for both of these optionsThe video link below provides an example of how the calendars function and render. Is this possible with Vanilla Calendar or should I build this out a different way?https://www.loom.com/share/acb7f1c0cda74b3784729e924bb93475

DameStJohn
1 year ago
I started building a web app with Webflow and Wized and with some time I was able to configure a unique Calendar UI. I'd like to rebuild this in Toddle. My particular use case requires:
- a full calendar with selectable dates (past, present, future)
- a full calendar with selectable dates (present and future)
- a week (horizontal) calendar for both of these options

The video link below provides an example of how the calendars function and render. Is this possible with Vanilla Calendar or should I build this out a different way?

https://www.loom.com/share/acb7f1c0cda74b3784729e924bb93475
Max
1 year ago
Hi! You can definitely do something like that in Toddle. I created a very flexible calendar package a while ago. This may already fit your needs: https://discord.com/channels/972416966683926538/1256279686816993470
DameStJohn
1 year ago
Hey @Max ! I installed your package yesterday. 🎉

It works perfectly for my appointment ui. Do you have a recommendation for a calendar date picker? I checked out Vanilla Calendar but Im not sure about its as customizable as I need it.
@DameStJohn
Hey @Max ! I installed your package yesterday. 🎉

It works perfectly for my appointment ui. Do you have a recommendation for a calendar date picker? I checked out Vanilla Calendar but Im not sure about its as customizable as I need it.
Max
1 year ago
Great to hear! I think that you can build a picker with the calendar package. All individual parts can be exchanged with custom components. So you could use a month view and create a picker from that
DameStJohn
1 year ago
Awesome! Two more connected questions:

1. I also have a week view for the day picker. Is that also an option?

2. And does this package already have swipe functionality (between months and weeks) ?
@DameStJohn
Awesome! Two more connected questions:

1. I also have a week view for the day picker. Is that also an option?

2. And does this package already have swipe functionality (between months and weeks) ?
Max
1 year ago
1. Yes
2. Yes

😊
You can check the live demo at https://sparkcal.toddle.site
DameStJohn
1 year ago
Awesome 🙌🏽🙌🏽🙌🏽 Appreciate your help!
💪1
DameStJohn
1 year ago
Hey @Max ! Hope all is well! I'm trying to make a few customizations with the week view calendar that I don't see available in attributes. Wondering if you can take a quick look at this video.

https://www.loom.com/share/748d337242904724bcc363b8b8e963de
Tod
1 year ago
Great energy @DameStJohn! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
Max
1 year ago
Hey man! Pretty sure you can do all of that. You will need to write your own component for the day header, for example, and use it instead of the original. In this component, you can hook into the context of the week day header and can access all info.

I created a quick and dirty demo project for you: https://editor.nordcraft.com/projects/customcal/branches/start/components/HomePage

Let me know if this helps 🙂
DameStJohn
1 year ago
Hey @Max hope you’re having a great wknd! I’m observing how a few different platforms have implemented their day view and landed on one that I like. Recorded a closer look from my device. (Squire Commander) Seems a bit of a stretch trying to extend Spark Calendar to perform this way. If it can GREAT, if not what do you recommend?
@DameStJohn
Hey @Max hope you’re having a great wknd! I’m observing how a few different platforms have implemented their day view and landed on one that I like. Recorded a closer look from my device. (Squire Commander) Seems a bit of a stretch trying to extend Spark Calendar to perform this way. If it can GREAT, if not what do you recommend?
Max
1 year ago
Hi! I would not do it with the calendar package. It is not build for that. But this is just a list, seems fairly easy to implement in Toddle. The only tricky part is the infinite scroll
DameStJohn
1 year ago
Gotcha! Again thank you for all the help! When you get a chance, trying to set text for specific elements in Toddle. Here's a video if you can take a quick look.

https://www.loom.com/share/a20d8f513890430eb39036a683d17ae2

Thanks a bunch!
@DameStJohn
Gotcha! Again thank you for all the help! When you get a chance, trying to set text for specific elements in Toddle. Here's a video if you can take a quick look.

https://www.loom.com/share/a20d8f513890430eb39036a683d17ae2

Thanks a bunch!
Max
1 year ago
Hey! You are welcome 🙂 I am not sure I understand the question. What is it that you want to accomplish and what is the road block?
DameStJohn
1 year ago
Apologies for the lack of clarity 🙏🏽

1. There’s a header element {Month} that I want to manipulate with the Spark calendar. Essentially, I want to set/update the current month and year when swiping through weeks or months (for eg. ‘August 2024’, ‘September 2024’, etc)

2. I’m using the second header element {Dotw, Date} that I want to manipulate for day view and week view. For day view, when swiped it would set/update the ‘day of the week’ and the ‘date’ (for eg. ‘Monday, 12th’, ‘Tuesday, 13th’, etc.) and for week view, when swiped, it would set/update to the date range (for eg. ‘Aug 11 - Aug 17’, ‘Aug 18 - 24’, etc)

I’m not sure how to configure this. Would this be an event or formula? A combination of both lol?

Thanks again!
Max
1 year ago
Ah, I see. You need two things for that: a variable that holds the date (this must be the input for start of the week-view in format YYYY-MM-DD) and the "On week change" event of the week-view. The variable determines the start of the current display. The week-view will automatically change if you change that. The event will update the variable when the week is swiped.

Here is an example:
https://editor.nordcraft.com/projects/customcal/branches/start/components/HomePage
DameStJohn
1 year ago
MAAAAAAAXXXX 🙏🏽🙏🏽🙏🏽🔥🔥

You are a GOD SEND! Im in the home stretch. Working on the day picker. Here's what I got so far:

https://www.loom.com/share/9198c57843994cc18e2c7a82e1a7e86f

Where do I tweak??
Max
1 year ago
No Problemo 😊 glad you like the package. And the calendar looks great btw!
You need to use the On month change event of the smaller calendar to update the variable. Similar to the On week change event
An yes, you need one variable for each calendar to avoid conflicts
DameStJohn
1 year ago
Hey brother! ✌🏾 more things lol

1. For desktop/laptop view, I'd like to implement buttons that onClick allow you to navigate the calendar (eg. next day, previous day, next week, previous week, etc.) Didnt see anything in the documentation for that.

2. I have an element that sets the day of the week (eg. Tuesday, Wednesday, Friday, etc) in my day view. It's off by a day. Not sure whats going on there lol

https://www.loom.com/share/7b6b28186fb941cbb319d45bad6beb1a
DameStJohn
1 year ago
Also! This may be a stretch of a request but is a horizontal day picker possible? Like this...

https://dev.to/kharioki/horizontal-calendar-a-simple-date-picker-for-react-native-4h2

I didnt see an 'On Day Click' event for week view.
Max
1 year ago
Hey man! So, the 12th is very clearly a Monday, even in your part of the world 😉
Max
1 year ago
Regarding the buttons to change the view: You cannot do that directly in Toddle, I cannot provide an action for that. But if you just update the variable that holds the date, the calendar will change respectively. So on right click in the day view, just add a day to the current date. In the week view, it is seven days, and so on...
@DameStJohn
Also! This may be a stretch of a request but is a horizontal day picker possible? Like this...

https://dev.to/kharioki/horizontal-calendar-a-simple-date-picker-for-react-native-4h2

I didnt see an 'On Day Click' event for week view.
Max
1 year ago
How exactly should that work? Isn't that just a horizontal list? I don't think you need the calendar package for that as you don't need any positioning logic for the events.
@Max
Regarding the buttons to change the view: You cannot do that directly in Toddle, I cannot provide an action for that. But if you just update the variable that holds the date, the calendar will change respectively. So on right click in the day view, just add a day to the current date. In the week view, it is seven days, and so on...
DameStJohn
1 year ago
- Day Of the Week Issue. 😅 yep, so it is a local issue correct? Is there anyway to fix that?

- Button Action. Gotcha 👍🏽

- Horizontal View. You’re right! It’s been a long day lol. This should be easy to knock out. Thanks again 🙏🏽
Tod
1 year ago
Great energy @DameStJohn! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
@DameStJohn
- Day Of the Week Issue. 😅 yep, so it is a local issue correct? Is there anyway to fix that?

- Button Action. Gotcha 👍🏽

- Horizontal View. You’re right! It’s been a long day lol. This should be easy to knock out. Thanks again 🙏🏽
Max
1 year ago
There is no issue with the locale. In your video you say that the 12th is a Tuesday. But that is not correct. The 12th is a Monday. It says so in your apple calendar. The screenshot is from your video 🙂
DameStJohn
1 year ago
Wowser…if you only knew how much time I spent trying to fix a problem that didn’t exist. Phew 😅 time for bed! Thanks brother
@DameStJohn
Wowser…if you only knew how much time I spent trying to fix a problem that didn’t exist. Phew 😅 time for bed! Thanks brother
Max
1 year ago
Bin there 😅 yeah, time for bed, then 😉
DameStJohn
1 year ago
Alright! I found the ACTUAL issue. Apologies for the confusion...

https://www.loom.com/share/e7a314a64f7849eeb60ca83328e08800
@DameStJohn
Alright! I found the ACTUAL issue. Apologies for the confusion...

https://www.loom.com/share/e7a314a64f7849eeb60ca83328e08800
Max
1 year ago
Is this a public project? Do you mind if I jump in there later? Makes troubleshooting easier
DameStJohn
1 year ago
I can make it public if you need. Not a problem. What do I need to do on my end?
@DameStJohn
I can make it public if you need. Not a problem. What do I need to do on my end?
Max
1 year ago
If you are not on a paid plan, it is public
DameStJohn
1 year ago
It’s public lol, what do you need from me?
@DameStJohn
It’s public lol, what do you need from me?
Max
1 year ago
Nothing. Just wanted to be polite before I enter your home 😊
DameStJohn
1 year ago
Oh nice! Thank you for your courtesy my friend lol
💪1
DameStJohn
1 year ago
Hey Max! I setup a few buttons and have tried several (AI generated) scripts to increment and decrement days. Just about got everything working with custom formulas.

The only issue is when going from one month into another (previous or next), the currentDate variable returns an incomplete string for a date. For example. when 'currentDate' is '2024-08-31', when the button is clicked, it returned '2024-09' (no day). When Im swiping between days (and weeks) the currentDate variable updates just fine. Head scratcher.

https://www.loom.com/share/7448daeeae1b4c8c93233bd1dacbb42d
Max
1 year ago
Can you at least once publish your project? Then I can clone and test it on my end.
Just want to make sure the calendar component is working as expected. I am guessing you are messing up the variable at some point. I'll have a look later
DameStJohn
1 year ago
Yep it’ll be published around 9am for you. 👍🏽
DameStJohn
1 year ago
PST lol
DameStJohn
1 year ago
Hey @Max !

My increment button is properly generating the next date. In this video, I used the inspect tool to get a closer look at what's going on. Several errors popped up.

https://www.loom.com/share/b179b20ec9074547977c9e087100e121
@DameStJohn
Hey @Max !

My increment button is properly generating the next date. In this video, I used the inspect tool to get a closer look at what's going on. Several errors popped up.

https://www.loom.com/share/b179b20ec9074547977c9e087100e121
Max
1 year ago
I'll have a look tomorrow, it's late here 😊
DameStJohn
1 year ago
Sounds like a plan! Thanks again
Tod
1 year ago
Great energy @DameStJohn! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
Max
1 year ago
Hey @DameStJohn! The "Could not find uuid in package" is a Toddle bug. This should be fixed soon. @Jacob Kofoed this error is thrown because I use this formula in the calendar package internally and it seems it is not exported. Will this be fixed with the fixes you are rolling out or do I need to do something in the package?
@Max
Hey @DameStJohn! The "Could not find uuid in package" is a Toddle bug. This should be fixed soon. @Jacob Kofoed this error is thrown because I use this formula in the calendar package internally and it seems it is not exported. Will this be fixed with the fixes you are rolling out or do I need to do something in the package?
Jacob Kofoed
1 year ago
I'm not 💯 % sure it's related, but the fix is live now, so please check again @Max @DameStJohn and let me know if there are still any issues.
@Jacob Kofoed
I'm not 💯 % sure it's related, but the fix is live now, so please check again @Max @DameStJohn and let me know if there are still any issues.
Max
1 year ago
It is still there... https://editor.nordcraft.com/projects/calfix/branches/start/components/HomePage?leftpanel=design&rightpanel=style&canvas-width=800&canvas-height=800
This is @DameStJohn's project that I cloned. It shows this error. uuid is a custom global formula that I use in the Spark Calendar package
@Max
It is still there... https://editor.nordcraft.com/projects/calfix/branches/start/components/HomePage?leftpanel=design&rightpanel=style&canvas-width=800&canvas-height=800
This is @DameStJohn's project that I cloned. It shows this error. uuid is a custom global formula that I use in the Spark Calendar package
Jacob Kofoed
1 year ago
Its a poor error message, I'll look into fixing that and potentially add a better fallback behaviour. However, it looks like the real issue is that the custom-3day-week component does not have a context provider of month-weekdays-provider in its ancestor hierarchy, since it uses that context internally.
@Jacob Kofoed
Its a poor error message, I'll look into fixing that and potentially add a better fallback behaviour. However, it looks like the real issue is that the custom-3day-week component does not have a context provider of month-weekdays-provider in its ancestor hierarchy, since it uses that context internally.
Max
1 year ago
Correct, thank you! The problem is that there are the wrong contexts in the individual custom components. The "pure" component works fine
DameStJohn
1 year ago
Thanks for working on this @Jacob Kofoed and @Max . To resolve that particular issue do I need to add the 'month-weekdays-provider' to the component?
@DameStJohn
Thanks for working on this @Jacob Kofoed and @Max . To resolve that particular issue do I need to add the 'month-weekdays-provider' to the component?
Max
1 year ago
I DM'ed you 🙂

Vanilla Calendar or something different?

DameStJohn

Max

DameStJohn

Max

DameStJohn

Max

DameStJohn

DameStJohn

Tod

Max

DameStJohn

Max

DameStJohn

Max

DameStJohn

Max

DameStJohn

Max

DameStJohn

DameStJohn

Max

Max

Max

DameStJohn

Tod

Max

DameStJohn

Max

DameStJohn

Max

DameStJohn

Max

DameStJohn

Max

DameStJohn

DameStJohn

Max

DameStJohn

DameStJohn

DameStJohn

Max

DameStJohn

Tod

Max

Jacob Kofoed

Max

Jacob Kofoed

Max

DameStJohn

Max