Book the next appointment

A dental clinic books the next visit from a screen flow: one week of slots, lunch and taken slots greyed out, one tap to pick.

Overview

A dental clinic books the next visit from a screen flow: one week of slots, lunch and taken slots greyed out, one tap to pick. No calendar app, no back and forth. The whole step is one Date/Time Picker component from Avonni Flow Screen Components, in its Weekly variant, on step 2 of a three step flow. This tutorial rebuilds the slot screen of Brightsmile Dental in your own org, first with a fixed list of booked slots, then points to the version that reads them from existing appointments.

What you build

Avonni Date/Time Picker on step 2 of a Salesforce flow: a week of thirty minute dental slots with lunch, booked slots and the weekend greyed out, Tuesday 10:30 selected

• Brightsmile Dental creates appointments with a three step flow. Step 2 is the slot, under a Display Text that names the visit: Nadia Ferreira · Hygiene visit · 45 min · Dr. Hana Sato.
• The field Pick a slot shows the week of September 14 to 20, 2026, Monday first, from 8:00 AM to 4:30 PM in thirty minute slots, with a date band above the days and Today, previous and next navigation.
• Lunch, 12:00 and 12:30, is greyed out on the five weekdays. Eleven booked slots are greyed out. Saturday and Sunday are fully greyed out. Seven columns, five of them open.
• Tuesday 15, 10:30 AM is selected. Next in the flow footer carries the choice into step 3, where the appointment is created.

Before you start

Adapt this to your own org. The eleven booked slots and the lunch hour are typed into the component here. That is the fastest way to reproduce the screen and the wrong way to run a clinic: a fixed list is stale the day after it is entered. Take it further gives the version that greys the slots from the appointments already in Salesforce, which is what a live booking screen needs. The appointment itself is written on the standard Event; any object with a start date and time takes its place.

• The Avonni Flow Screen Components package is installed, and the front desk holds a license and the permission set. See Installation & Licenses management.
• The slot screen itself needs no record. Step 3 writes the appointment; the figure does not show it. Any object with a start date and time works. The standard Event is the shortest path:

Object	Field	Type	Role
Event (Event)	StartDateTime	Date/Time	Receives the slot picked in step 2
	EndDateTime	Date/Time	The start plus the visit length, 45 minutes here
	Subject	Text	Hygiene visit
	WhoId	Lookup (Contact)	The patient, Nadia Ferreira

Sample data. None is needed to reproduce the screen. The booked slots in the figure are typed into the panel as a fixed list, which is what Build it does. The last section shows how to read them from existing appointments instead.

Build it

1

Create the flow and its screens

1. In Setup, open Flows and create a Screen Flow. Save it with the label New appointment.
2. Add a first Screen element with a Display Text: Choose the patient and the visit type.
3. Add a second Screen element labeled New appointment · Step 2 of 3. Add a Display Text: Nadia Ferreira · Hygiene visit · 45 min · Dr. Hana Sato. This is the slot screen.
4. Add a third Screen element with a Display Text: Review and confirm the appointment.
5. Keep the standard header and footer on all three screens.

Why: the header of a running screen flow shows the flow label, not the screen label. The flow in the figure is labeled New appointment · Step 2 of 3 so that its header reads that way on the captured screen; in a real flow that text would sit on every screen. Label yours New appointment and show the step count in a Display Text or a Progress Indicator.

The flow in Flow Builder, with the Create Records element of step 8 between the second and third screens.

2

Add the Date/Time Picker

1. On the second screen, drag the Date/Time Picker component from the Avonni section of the Components panel under the Display Text. Give it the API name appointmentSlot.
2. Click the component and open the Edit Date Time Picker Component panel.
3. In the Properties tab, set Label to Pick a slot and Field level help to Slots already booked are greyed out.
4. Turn on Required. Set Type to Radio.

Why: Radio means one slot per booking. Checkbox would let the receptionist pick several, which a visit does not need.

The second screen: the Display Text, then the picker, listed as Avonni Date Time Picker.

The top of the Properties tab, with the settings of steps 2 and 3.

3

Show one week at a time

1. Set Variant to Weekly and Date Picker Variant to Inline.
2. Set Week Start Day to Monday and Time Slot Duration to 00:30.
3. Set Default Visible Date to September 15, 2026.
4. Leave Display Next Button off.

Why: Weekly lays the seven days side by side, one column each. Inline shows the date band above the columns instead of a date field. The band highlights the visible date, not the selected slot: the figure highlights Tuesday 15 because that is the day of the chosen slot, so Default Visible Date is set to the 15th; the week shown is the same as with the 14th. The flow footer already has Next, so the component's own button stays off.

Weekly, Inline, thirty minute slots, the 15th as the default visible date.

4

Set the clinic's hours

1. Open the Visible Dates and Times section.
2. Set Start Date to September 7, 2026 and End Date to November 6, 2026.
3. Set Start Time to 08:00 and End Time to 17:00.
4. Turn on Show Disabled Dates.

Why: two months of navigation is enough to book the next visit. End Time is the end of the last slot, so 17:00 makes 4:30 PM the last button. Show Disabled Dates keeps unavailable slots visible in grey rather than removing them, which is how the receptionist sees that a time is taken rather than nonexistent.

The date range and the hours. Show Disabled Dates sits at the bottom of the same section, after the disabled lists.

5

Grey out lunch and the weekend

Still in Visible Dates and Times, open Disabled Intervals and add six rows, each with a Start and an End:

Start	End	What it greys
Mon, Sep 14, 2026, 12:00 PM	Mon, Sep 14, 2026, 1:00 PM	Lunch
Tue, Sep 15, 2026, 12:00 PM	Tue, Sep 15, 2026, 1:00 PM	Lunch
Wed, Sep 16, 2026, 12:00 PM	Wed, Sep 16, 2026, 1:00 PM	Lunch
Thu, Sep 17, 2026, 12:00 PM	Thu, Sep 17, 2026, 1:00 PM	Lunch
Fri, Sep 18, 2026, 12:00 PM	Fri, Sep 18, 2026, 1:00 PM	Lunch
Sat, Sep 19, 2026, 12:00 AM	Sun, Sep 20, 2026, 11:59 PM	The weekend

Why: an interval greys every slot it covers, so one row handles both lunch slots, and one row handles the whole weekend. Day names such as Sat are not accepted in Disabled Date Times; a dated interval is the way to close the weekend.

The six intervals. The panel prints each one as an ISO date time in UTC; the weekend row runs from Saturday 00:00 to Sunday 23:59.

6

Grey out the booked slots

Open Disabled Date Times and add eleven entries, one per booked slot:

Day	Booked slots
Mon, Sep 14, 2026	9:00 AM, 9:30 AM, 2:00 PM
Tue, Sep 15, 2026	8:30 AM, 11:00 AM
Wed, Sep 16, 2026	10:00 AM, 3:30 PM, 4:00 PM
Thu, Sep 17, 2026	9:00 AM
Fri, Sep 18, 2026	1:30 PM, 2:00 PM

Why: a disabled date time greys the slot that starts at that exact time. This fixed list reproduces the figure. In production, the list comes from the appointments already in Salesforce, see Take it further.

The eleven booked slots. The panel shows them in the time zone of the user editing the flow.

7

Format the days and the hours

1. Open the Date Format section: Date Format Weekday Short, Date Format Month Short, Date Format Day Numeric.
2. Open the Time Format section: Time Format Hour Numeric, Time Format Minute 2 Digit, Time Format Hour 12 on.

Why: the columns read Mon 14 and the band reads Sep 14. The figure shows the slots as 8:00 AM. Built from the panel they read 8:00:00 AM: Time Format Second offers Numeric or 2 Digit and no empty value, so the seconds stay (see Troubleshooting).

Date Format and Time Format.

8

Use the slot in step 3, activate

1. Click Done. After the second screen, add a Create Records element on Event with StartDateTime set to {!appointmentSlot.value}, Subject to Hygiene visit, and the other fields your appointment needs.
2. Save the flow and click Activate. Add it to the Appointments page of your app with the standard Flow component in Lightning App Builder, or launch it from the patient record.

Why: Value is the picked slot as a date and time. In Radio mode it holds the single selection.

The settings that matter

Setting	Value	Why
Variant (variant) with Date Picker Variant (datePickerVariant)	Weekly, Inline	One week of columns with the date band above them.
Type (type) with Display Next Button (displayNextButton)	Radio, off	One slot per visit, and the flow footer does the Next.
Disabled Intervals (disabledIntervalsSerialized), Disabled Date Times (disabledDateTimesSerialized), Show Disabled Dates (showDisabledDates)	lunch and weekend as intervals, eleven booked slots as date times, on	Taken time stays visible in grey instead of vanishing.
Start Time, End Time, Time Slot Duration (startTime, endTime, timeSlotDuration)	08:00, 17:00, 00:30	The clinic's day, in thirty minute slots, the last one at 4:30 PM.

Interactions

Trigger	Action	What to set
Change, fires when the receptionist selects a slot	Optional: Flow Navigation to move to the next screen as soon as a slot is picked	The Next direction. The figure keeps the standard footer instead, so the receptionist can change her mind before leaving the screen.

Try it

1. Start the flow and click Next. The week of September 14 opens with Tuesday 15 highlighted in the band, lunch and the weekend in grey, and the eleven booked slots in grey.
2. Click Next without picking: the field reports that a value is required and the flow stays on the screen. Click the Tuesday 15 slot at 10:30: the button turns solid blue. Click Next: step 3 opens and the Event is created with that start.
3. Use the next-week arrow: the week of September 21 has no grey slots on weekdays, because the fixed lists cover the 14th to the 20th only. That is the limit of the fixed version, and why the production version below reads the calendar.

Take it further

Read the booked slots from Salesforce. Disabled Date Times accepts a mapped Date/Time collection variable, so the grey slots can come from the appointments already in the org:

1. Before the slot screen, add a Get Records on Event (or your appointment object) for the practitioner and the date range you show, storing StartDateTime.
2. Add a Loop over the result and an Assignment that adds {!Loop.StartDateTime} to a Date/Time collection variable. The tutorial How to create Collection Variables for StartDateTime and EndDateTime walks through those two elements.
3. In the picker, switch Disabled Date Times to Mapped and select that collection.

A disabled date time greys the slot that starts at that time. A 45 minute visit covers two thirty minute slots, so add the start of each slot the visit overlaps. The How to Block Out Times tutorial shows the same idea in a video.

The same picker exists on two other Avonni surfaces:

• Date Time Picker for Dynamic Components, on a Lightning page, with the same Weekly variant, disabled intervals and disabled date times.
• Date Time Picker for LWC Components, as the avonni-date-time-picker tag in your own component. It takes disabledDateTimes but has no disabled intervals, so lunch and the weekend are listed slot by slot.

There is no Date/Time Picker for Experience Sites; this screen flow can run on a site instead.

Two variations worth trying:

• Turn on Show End Time so each button reads 10:30 AM - 11:00 AM.
• Turn on Hide Navigation when the receptionist must book within the visible week only.

Troubleshooting

Problem	Cause	Fix
Saturday and Sunday still appear, as grey columns	The Weekly variant always shows seven days. With Show Disabled Dates on, the disabled weekend is shown in grey.	This is the figure's state. Turning Show Disabled Dates off hides the weekend columns, but also hides lunch and the booked slots instead of greying them. Choose one behavior for the whole picker.
Entering Sat or Sun in Disabled Date Times does nothing	Only values that parse as dates are kept. Day names are dropped.	Close the weekend with a row in Disabled Intervals, from Saturday 12:00 AM to Sunday 11:59 PM.
The date band highlights Monday, not the day of the chosen slot	The band marks the Default Visible Date, not the selection.	Set Default Visible Date to the day you want highlighted. The week shown does not change as long as the date stays in the same week.
The slots read 8:00:00 AM, with seconds	Time Format Second defaults to Numeric on the Flow component, and the panel offers Numeric or 2 Digit only.	There is no setting in the panel to remove the seconds as of September 2026. Contact Avonni support if the seconds are a problem for your users.
The last slot is 4:30 PM, not 5:00 PM	End Time is the end of the last slot.	Set End Time to 17:30 to offer a slot starting at 5:00 PM.
Grey slots are shifted by a few hours for some users	Disabled date times are stored as absolute instants and displayed in each user's time zone. A lunch entered as 12:00 PM in one time zone shows at another hour for a user in a different one.	Enter the values in the time zone of the clinic and make sure the users who book share it, or turn on Show Time Zone so the picker shows which zone it displays.