The event picker lets you pick the date and duration of an event.
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.
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.
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.
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 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 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.