How to create a weekly hours input like Calendly?


Can someone help me figure out how to make a page to set weekly hours like in Calendly from the data structure, autobinding, and adding new input?

I spent hours trying this without much progress. I am using air time picker plugins for the time.

have you checked out the TopCal plugin?

Finally I made it work! though it’s without autobinding.


Data structure: List of date range for each day of the week.

sorting date range data type is very tricky. First, I made a RG with data source of the day’s list of date range :start:sorted, which will return the sorted start date (not date range anymore). Then I made a group inside that RG that filters the date range that contains (point) of current cell date. That’s basically it.

adding new input by using keith’s method: [Challenge] - Create a new Repeating group row without database - #5 by keith
the action that enables the plus icon to add new input is quite weird:
RG’s custom state (list of dates) merged with RG’s custom state (same one):plus item current date and time (hours changed to 3 and minutes to 0). I change the time because I want the new line to be always empty, for that I also limited the time picker between 6 AM and 9 PM. It requires some conditionals, but it should be pretty clear.

autobinding doesn’t seem to work on date range data type, but using a button is not that much harder so I’m happy.

Well I hope at least it can help a tiny bit.

Hey, thanks for the reply!
I checked it out, and I think it might works, but it’s rather pricey, and I thought that it was still achievable without a plugin (which finally it is! :grin: )

This topic was automatically closed after 70 days. New replies are no longer allowed.