From the Options Sets page in that Editor you can right click to Copy and then simply Paste it into your app
@gf_wolfer how can I return all the dates in between from two dates inserted in a date list from two date time pickers?
What is the best approach?
Hi There, Just a quick question, if we purchase the template, does it comes with the plugin, or do we have to purchase the plugin also? my other question is what happen if we want to copy and past certain elements to our app, do we have to purchase the plugin separately ? Thanks for your feedback
The plugin will need to be purchased or subscribed to in addition to the Top Calendar template.
There is no charge for the Top Shelf Elements template that is commonly referenced in this forum thread, and you can freely copy and paste the elements into your own app but you will need to purchase or subscribe to the plugin for them to work if they are using the TopCal plugin
That’s great, is the template I am referring to https://top-calendar.bubbleapps.io/ , right?
Is the above thread still the case, because my use case is to setup a availability for the next 6 to 12 months ahead for time slots
You can definitely set availability that far in advance. There is no limit here, but to optimize performance it’s recommended to load the data as it’s needed and not all at once.
That specific question was about a unique Pattern to a schedule - every first Monday of a month instead of just every Monday which I am unsure if it applies to your case or not.
Hi I am having trouble with saving the availability for this for the user. How would I go about setting up the workflow? Also, how would I set up the booking side where it shows the availability for the user.
Could be any number of things. Here are a couple ideas:
The app you are using has not paid for or subscribed to the TopCal plugin (can be seen under the Plugins Tab)
The screenshot there is used on example pages and does not have it’s own workflows setup for saving a Schedule. It is recommended to go through the information and videos on this page while also looking in the Bubble Editor to see how things are setup and Schedules get saved:
Thanks for the update Gf_wolfer
My other question, what is the difference by getting the full template from bubble of 299 or just the plugin ?
The Top Calendar template is fully built out to be a functioning scheduling app similar to Calendly, so it includes all Logic, Data Structure, and Elements to make it work smoothly. You can use this link to go to the template and then click Click for Demo to test it out and you will see all the extra elements and logic that would be included to make it function.
While the TopCal plugin is just the plugin that helps enables scheduling functionality in any app. Plus there are free Elements in the Top Shelf Elements template that can be used with the Top Cal plugin to help you understand and speed up development, but it is not a complete functioning scheduling app - that part is left open to you to implement it best within your app’s structure.
So if you are more of a do it yourself type with free time, you can just use the Plugin and the free Elements. Or if you want to save a lot of time designing and building out logic then you can get the template.
Hey Gf, it actually applies to both cases for me, we will need to setup a schedule for every Monday or forthnight.
I must have missed this before, but this is in the Template example that I sent you before.
You can do this by using the Create a List of Dates element in the TopCal plugin, and using logic similar to below; where you subtract the larger date by the second day and format it as days, to know how many are in the sequence. And then use the plugin to list out those days.
Ok, the plugin does not natively handle this, but there are a couple of ways you could get it to work.
Let the plugin generate all Mondays then, and you can come up with specific rules in your own data structure to conditionally show or hide the Date on the Calendar. (when this Date, extract number is between 7 and 14, or 21 to 28, don’t show). This is more ideal for a monthly cadence of a schedule, but not a bi-weekly type schedule that could shift in a month
Or you can use Specific Date availability to say which specific Mondays, or the List of Dates to generate the Mondays that you want to Block and then use the Block these Dates part of the plugin
Hey! Just wanted to know more about the capabilities of this plugin and if this is possible, made a video so it is easier to understand: Loom | Free Screen & Video Recording Software | Loom
Thanks for the video, it helped get things clarified right away. Overall, building out the Availability will always be in the Schedule’s time zone, and to then show it in a specific time zone we can simply use Bubble’s built in :formatted as.
Some quick tips:
-
The Time Zone in the GetAvailableTimes Element should only ever be set according to the Schedule (a resource, person, location, etc). This is to ensure their weekly pattern (9-5) gets built out in their time zone - so in the example always have that element set in the LA timezone (schedule’s timezone)
-
Once the Available Times have been created by the GetAvailableTimes Element, we can then use Dropdowns, or time zone selectors to adjust them to meet our needs of a specific time zone.
To do this, you would need to:
- Set the CalendarDates time zone to to be in ‘DesiredTimeZone’
- Change any displayed dates (text) to be
:formatted asand displayed in the DesiredTimeZone - so maybe it could be a Dynamic Time Zone referencing a ‘Time Zone Dropdown’ on the page. Make sure all elements use this, it can be easy for a date to look wrong but then realize you didn’t set that Text element’s time zone to the same as other elements
Ok just want to confirm this: Loom | Free Screen & Video Recording Software | Loom
You have things correct but still need to adjust the way the Text elements are displayed. Changing the Calendar time zone will change the generation of Dates for the calendar, but do not change the Text Elements in the calendar
In the editor, find the ‘Calendar date number’ and make sure it is showing as the ‘current cell’s date:formated in time zone of the user’
The same adjustment will need to be made to the Text element in the repeating group with the buttons that show the times - those Text elements also need to be formatted in the time zone of the current user which I am guessing they are not
Got it, yes it works perfectly now! Thank you!
Hi @gf_wolfer.
I am fetching availability dates from a booking company into a state called fareharbor_date_listand I need to display them in the calendar.
Therefore, how can I display them into the calendar RG?