Event Calendar How to get the date range

[psweb]

Hi all, I would like to add a button to my page that when clicked takes the currently displayed date range from my Event Calendar, so I can send those dates to an API.

If the above is being displayed I would like to get 29-11-2020 and 9-1-2021 returned.

The Date Click event only hands the exact single date selected, i need the current range, any ideas.

[Teodor]

Hi Paul,
Go to:

Getting Started with App Connect Event Calendar

Then scroll down to Selectable Dates.

[psweb]

Thanks Teo, I saw that there, it does what I want just not quite like i want it to, lol.

I was hoping I could access those properties without the user clicking on the calendar or highlighting any date range at all, so its more like this

The user clicks “Search This Month” the server action fires to the booking provider to check availability with something like this
https://api.rezdy.com/v1/availability?productCode=PXL0UZ&startTimeLocal=2021-02-29 00:00:00&endTimeLocal=2021-04-10 00:00:00&minAvailability=3

And this returns

Do you think there is a way to achieve this so I can replicate what the user already has in their Bubble site? I know it’s painful but just being hopeful
I started trying things like {{calendar1.currentDates}} {{calendar1.data.values}} etc. so just hoping its hiding there somewhere.

[Teodor]

Sorry i don’t really understand your idea.
How do you select the dates in the calendar exactly? How do you tell it the start date is 29.12.2020 and that the end date is 05.01.2021?

[psweb]

In there current site it seems that the only thing the user can do is use the arrows here

Then once selected they click the Search this month which gets all the events, which are all then clickable.

[Teodor]

So what does Search This Month button do? Does it take the first displayed day and the last displayed day and send them as query params?
Or does it just load dynamic data and displays it in the calendar. Sorry, but the logic here is … weird

[psweb]

yes takes first and last displayed date and sends them as params to the API

[Teodor]

I see, from what i see in our component the options for this have not been added:

https://fullcalendar.io/docs/v4/view-object

i.e. the:

activeStart

A Date that is the first visible day. In month view, this value is often before the 1st day of the month, because most months do not begin on the first day-of-week.

and

activeEnd

A Date that is the last visible day. Note: This value is exclusive . See how events are are parsed from a plain object for further details.

I think we can easily add them to the calendar, maybe @patrick can check this as well.

currently you can only send the dates users select in the calendar.

[psweb]

Thanks so much Teo, that would be awesome.

[nepatriot]

@Teodor

I think we can easily add them to the calendar, maybe @patrick can check this as well.

Hey @Teodor,

This feature would be very useful to me as well.

I think this totally makes sense from a development standpoint. The calendar query currently needs to return all events to ensure that if the user is looking at today +/- 1/5/10 years, data is displayed.

Right now, the query would need to return all that data. Once this feature is enabled, you can send the activeStart and activeEnd parameters to the query to limit the size of the output.

[nepatriot]

@psweb, do we need to turn this into a feature request? Let me know and I’ll happily take a crack at it.

[psweb]

Just hoping, maybe, just maybe @patrick may have had a chance to look into adding this.

[nepatriot]

I am with you in mind, body and spirit. Let me know what if anything I can do to help!

[psweb]

Thank you so much Patrick, looking forware to the next update

[Teodor]

This has been implemented in Wappler 3.7.7