Event Picker

Pick & view other events in a calendar

The event picker lets you pick the date and duration of an event.

Using the event picker in a form

Configuration

The picker can display other events as well as allow you to pick new events. This allows you to show potential conflicts or other events for reference.

There are therefore two sections to the component's configuration.

The Events section is where you customize what events will show up in the picker when someone is adding a new event. The source can be any table in your app or a relation.

The Data section is where the event that you pick will be added.

You can use the event picker in a form, or on a details screen.

Using on a details screen

When on a details screen, the event picker will allow you to pick one event for that item. Once the event is picked, the event picker will be filled.

You will therefore need a Start and End column for your items. The event picker will work with User Specific Columns, so if you want users to pick their own private events on items they can do so.

Users can then clear the event from the picker using the cross.

Using on an edit, add or form screen

The event picker is particularly useful in edit, add or form screens. Instead of using two separate fields for Start and End time, you can use a single Event Picker.

Using the Event Picker in an add screen

Using in forms

Using the Event Picker in forms is slightly more complex if you want to display existing events in the picker. For example, in this Room Booking app, we have a form button on each Room item which lets users book that room. That form will then populate a separate sheet called 'Bookings'.

The event picker within a form screen

The problem, however, comes when we want to show the existing bookings for that room. In the current configuration above 👆🏼, the Events area is simply reading from the Bookings sheet. This means that users will see all events for all rooms in every Event Picker.

We want users to only see events for the room they are currently booking. To do this, we need to create a relation between Rooms & Bookings and then choose that relation as the source in the Event Picker's configuration.

The bookings relation in the Rooms table

​