Discuss

App Connect Calendar Dynamic Events

On this page

There are multiple dynamic events available in the App Connect Calendar such as - on date click, on event click, on event drop/move and on event resize. Each of the dynamic events returns specific data, based on what is it doing. In this tutorial we will show you the basics of using the dynamic events like accessing the clicked date or event id and using it as a value for other elements.


Dynamic Events Overview

You can access the dynamic events of the calendar, by selecting it and clicking the Add New Dynamic Event button:

Screenshot_1|690x414

You will see the dynamic events available for the calendar in the Calendar category:

Screenshot_2|690x414

Using Dynamic Events

We will show you a few basic examples of what data you can access using the dynamic events and how to use it with other elements. In these examples we will store different values in a variable, but the same works with inputs, server actions, data detail or other element.

We created a variable in App Structure and added its value on the page, so we can see the results:

Screenshot_3|690x414

Passing Selected Date to a Variable

Select the calendar and add new dynamic event:

Screenshot_4|690x414

Select Calendar > Date Click:

Screenshot_5|690x414

Then click the dynamic action picker button:

Screenshot_6|690x414

Select Variable > Set Value and click the Add button:

Screenshot_7|690x414

Then click the dynamic data picker to select the value:

Screenshot_8|690x414

Every event returns specific data in the dynamic data picker. You can see the data returned by the Date Click Event. We need the date returned, so select it and click the select button:

Screenshot_9|690x414

And click select to apply our dynamic action:

Screenshot_10|690x414

Save the page and preview the results:

date-selection|690x419

Passing Selected Event Data to a Variable

Select the calendar and add new dynamic event:

Screenshot_4|690x414

Select Calendar > Event Click:

Screenshot_11|690x414

Then click the dynamic action picker button:

Screenshot_12|690x414

Select Variable > Set Value and click the Add button:

Screenshot_13|690x414

Then click the dynamic data picker to select the value:

Screenshot_14|690x414

Every event returns specific data in the dynamic data picker. You can see the data returned by the Event Click Event under event, so you can select the event ID, start or end dates and title:

Screenshot_15|690x414

We select event title:

Screenshot_16|690x414

Click select to apply our dynamic action:

Screenshot_17|690x414

Save the page and preview the results:

event-selection|690x419

This way you can use the different dynamic events, and pass specific data depending on the selected event.