Coming Soon to AppExchange — 2026

Date Time Booking tier

Schedule dates and times together in Salesforce. Combine multi-date selection with a visual time slot grid or dropdown pickers. Assign shared or per-date times, group slots by period (Morning, Afternoon, Evening), track statuses with color-coded slots, and detect conflicts automatically.

Notify Me at Launch See Use Cases
Date Time component in action — selecting dates and time slots in Salesforce

Overview

Date Time extends the date selection calendar with time scheduling. After selecting dates, users assign a start time (and optionally an end time) to each one using dropdown menus or a visual time slot grid. You control the time interval (15, 30, or 60 minutes), the visible time range, and whether each date can have a different time or all dates share the same time.

Use this component when your Flow or Record Page needs both a date and a time — for appointment scheduling, session booking, shift planning, interview scheduling, or any workflow where the time of day matters. All properties from the Date component are also available (recurring patterns, status colors, edit mode, date range consolidation, etc.).

On This Page

Object & Field Mapping

When configuring this component on a Lightning Page or via the Setup Wizard, these are the object and field API names you'll need to provide.

Your Record Object
Related_Object__cObject API Name
Date_Field__cDate field
Relationship_Field__cLookup to parent
Start_Time_Field__cTime field
End_Time_Field__cTime field
End_Date_Field__cDate range end (optional)
Status_Field__cPicklist field (optional)
Hover_Fields__cPopover detail fields (optional)
Sub-Block Object Optional
Sub_Block_Object__cObject API Name
Sub_Block_Parent_Lookup_Field__cLookup to parent
Sub_Block_Date_Field__cDate field
Sub_Block_Start_Time_Field__cStart time
Sub_Block_End_Time_Field__cEnd time
Sub_Block_Name_Field__cLabel field (optional)
Blocked Dates Object Optional
Blocked_Dates_Source_Object__cObject API Name
Blocked_Dates_Date_Field__cDate field
Blocked_Dates_Filter_Field__cLookup to parent (optional)

Sub-Block Use Cases

When Consolidate Time Span is enabled, gaps between selected time slots are automatically detected and saved as separate records on a child object. Users can also manually mark slots as sub-blocks.

  • Shift scheduling with breaks — Employee selects 8 AM – 5 PM; the 12 – 1 PM lunch gap auto-creates a record on a Break__c object
  • Travel itineraries — User blocks travel windows; layovers between flights become Travel_Leg__c records
  • Training schedules — Instructor selects teaching blocks; free periods between sessions save as Available_Slot__c records
  • Work schedules with appointments — Manager defines work hours; gaps for meetings or appointments auto-save to an Appointment__c object
Important: Replace the orange values with your org's record object and field API names. If you use sub-blocks, replace the purple values with your child object and fields. If you use blocked dates, replace the red values too. Everything else works as-is.

Use Cases for Date Time

The Date Time component is ideal for any scenario where users need to select dates AND assign specific times. Here are 15 real-world use cases.

1. Interview Scheduling

Recruiters schedule interviews by selecting dates and choosing 30-minute time slots from a per-date grid. Each date gets its own grid via allowDifferentTimes, allowing different interview times on different days. Status colors track Scheduled (blue), Completed (green), No Show (red), and Cancelled (gray). appendDateTimeToName auto-names each record for easy identification.

2. Appointment Booking

Clients or service reps pick appointment dates and times from a visual time slot grid. conflictBehavior = 'block' prevents overlapping appointments by greying out taken slots. minTime and maxTime limit selections to business hours. Creates one record per appointment with date, start time, and end time fields.

3. Shift Scheduling

Managers assign employee shifts across multiple days. Pick dates and set start/end times per shift using enableEndTime. groupTimeSlotsByPeriod organizes the grid into Morning, Afternoon, and Evening sections. timeInterval = 60 provides 1-hour blocks. Auto-generates one shift record per day.

4. Maintenance Windows

IT teams schedule server maintenance windows by selecting dates and assigning 1-hour time blocks. consolidateTimeSpan groups adjacent slots into a single time span (e.g., selecting 2 AM, 3 AM, 4 AM becomes one 2–4 AM window). Conflict detection prevents overlapping maintenance on the same system.

5. Delivery Time Windows

Customers select preferred delivery dates and time windows from a dropdown picker. timeDisplayMode = 'dropdown' shows clean time pickers instead of a grid. minTime = '09:00' and maxTime = '17:00' limit to business hours. allowDifferentTimes lets each delivery date have its own window.

6. Clinic & Healthcare Appointments

Patients book clinic appointments by selecting dates and 15-minute time slots. timeInterval = 15 provides granular scheduling. statusColorDisplay = 'grid' shows which slots are Booked vs. Available at a glance. preloadExistingDates shows the patient's existing appointments on the calendar.

7. Call Center Callback Scheduling

Support reps schedule customer callbacks at specific times. timeInterval = 30 gives 30-minute slots. conflictBehavior = 'block' prevents two reps from booking the same callback slot. Each callback record gets a date, time, customer, and a callback-reason field via recordNameField.

8. Customer Onboarding Sessions

Customer Success teams schedule multi-week onboarding curricula — one 60-minute session per week for 8 weeks. Recurring patterns combined with the time grid let CSMs set the cadence in two clicks. appendDateTimeToName auto-labels each session record.

9. Training Class Time Slots

Training coordinators schedule multi-day classes with specific times each day. Use allowDifferentTimes to set different morning/afternoon blocks per day. consolidateTimeSpan with sub-blocks groups the morning + afternoon into a single training-day record while preserving lunch breaks as sub-blocks.

10. Demo Request Slot Picker

Embed in your community / public site so prospects book a demo slot themselves. preloadMode = 'readonly' shows your reps' existing demos as greyed out. conflictBehavior = 'block' prevents double-booking. maxTime caps slot pickup at business hours.

11. Quarterly Business Review (QBR) Scheduling

CSMs schedule QBRs with dozens of accounts each quarter. The time grid lets them slot in 90-minute reviews. twoMonthView spans the quarter end. Status colors track Scheduled, Confirmed by Customer, Held, and Rescheduled.

12. Open House & Property Showing Tours

Real estate listings expose available showing slots to buyers' agents. timeDisplayMode = 'grid' shows 30-minute tour blocks. statusColorDisplay = 'grid' colors slots as Available (green), Booked (orange), or Hold (amber). Embed on listing record pages or community sites.

13. Service Truck Dispatch Windows

Dispatchers slot field jobs into time windows (e.g., 8-10 AM, 10-12 PM). timeInterval = 120 creates 2-hour blocks. enableEndTime lets dispatchers extend a job past its slot when needed. Pair with a status color for In Progress to track jobs that ran over.

14. Webinar Registration

Multi-session webinar series — pick which sessions to attend. timeDisplayMode = 'list' shows sessions as a clean list of dates+times. conflictBehavior = 'warn' warns attendees if they pick overlapping sessions but lets them proceed if they understand. Auto-generates one registration record per session.

15. Multi-Day Conference Session Picker

Conference attendees pick which sessions they'll attend across a multi-day agenda. Combine with sub-blocks: each day's keynote + breakouts becomes a parent record with sub-block detail per session. Status colors mark Confirmed vs. Tentative attendance. Use groupTimeSlotsByPeriod to organize Morning / Afternoon / Evening blocks.

Lightning Page Setup

1

What You Need First

Create a child object to store date+time entries. It needs a Date field, one or two Time fields, and a Lookup back to the parent. For example, an Appointment__c object:

FieldTypePurpose
Appointment_Date__cDateStores the selected date
Start_Time__cTimeStores the start time
End_Time__cTimeStores the end time (optional)
End_Date__cDateOptional — for date range consolidation
Contact__cLookupLinks back to the parent record
Status__cPicklistOptional — for status color coding
Note: recordId is passed automatically on Record Pages. For App Pages, Home Pages, or Experience Sites, use staticRecordId.
2

Drop It In

Drag the Date Time component onto your page in App Builder and configure:

  • relatedObjectApiName — your date/time object, e.g. Appointment__c
  • dateFieldApiName — the Date field, e.g. Appointment_Date__c
  • relationshipFieldApiName — the Lookup field, e.g. Contact__c
  • startTimeField — the Start Time field, e.g. Start_Time__c
  • endTimeField — the End Time field, e.g. End_Time__c
  • enableEndTime — set to ON to show both Start and End Time pickers
  • timeDisplayMode — grid for visual time slot grid, dropdown for time pickers
  • timeInterval — slot size: 15, 30, or 60 minutes

Or use the Setup Wizard:

  • configName — loads all settings from a saved configuration, e.g. Interview_Scheduling
3

What Comes Out

One record per date with time fields populated. When the user selects dates, assigns times, and clicks Save, the component creates one record per date with date, start time, and end time fields filled in. Enable conflict checking to automatically block time slots that overlap with existing records. The component uses additive save — inserts new records but does not delete existing ones.
4

Summary View After Save

By default the calendar and time grid stay expanded after Save. To collapse them into a small summary card (and let the user click the card to re-expand), set both:

PropertyValueEffect
showInlinetrueRenders the picker inline on the page instead of a popup modal.
showDoneButtonInlinetrueShows a Done button that collapses the picker to a summary card listing the selected dates and times. Click the card to re-expand.

Useful on busy record pages where the picker should step out of the way after the user has saved their picks.

Flow Setup

1

What You Need First

Same object setup as Record Page above. Then create Flow variables based on your use case:

Variable NameTypeCollection?Notes
{!selectedDates}TextYesDates only (no time info) — use if you just need the dates
{!dateTimesJson}TextNoDates + times as JSON — feed to MultiDatePickParser for loopable entries
2

Drop It In

Add a Screen element in Flow Builder, drag the Date Time component onto it, and configure:

  • label — button text, e.g. "Schedule Appointments"
  • modalTitle — calendar modal title, e.g. "Pick Dates & Times"
  • showInline — ON to embed the calendar directly
  • timeDisplayMode — grid or dropdown
  • timeInterval — 15, 30, or 60 minutes
  • enableEndTime — ON to capture both start and end times
  • selectedDatesWithTimesJson (Output) — wire to {!dateTimesJson}
3

What Comes Out

Dates-only or dates+times — your choice. {!selectedDates} gives you a simple array of dates. For dates with times, feed {!dateTimesJson} to the MultiDatePickParser invocable action — it returns loopable entries with fromDate, toDate, startTime, and endTime fields. If you configured the Related Object fields, records are auto-saved with time data.
All Properties Reference

Configuration

PropertyTypeDefaultDescription
configNameString—Name of a saved Config Custom Metadata record. Loads all settings from that record.

Display Properties

All display properties from Date are available, including: label, modalTitle, showInline, twoMonthView, calendarSize, dayHeaderFormat, weekStartsOnMonday, showRecurringPattern, showSelectedSummary, showDoneButtonInline, disabled, required.

Time Selection Properties

PropertyTypeDefaultDescription
timeIntervalInteger30Minutes between time slots. Options: 15, 30, or 60.
minTimeString08:00Earliest time in 24-hour format (HH:mm), e.g. 08:00.
maxTimeString18:00Latest time in 24-hour format (HH:mm), e.g. 17:00.
timeDisplayModeStringgridgrid — visual time slot grid where users click slots. dropdown — time picker dropdowns for start/end time.
allowDifferentTimesBooleanfalseWhen ON, each selected date gets its own time picker/grid instead of sharing one time across all dates.
enableEndTimeBooleanfalseWhen ON, shows a separate End Time alongside Start Time (dropdown mode) or auto-calculates end time from slot duration (grid mode).
groupTimeSlotsByPeriodBooleanfalseWhen ON, groups the time slot grid into Morning, Afternoon, and Evening sections.
startTimeFieldString—API name of the Time field for start time on the related object.
endTimeFieldString—API name of the Time field for end time on the related object.

Conflict Detection

PropertyTypeDefaultDescription
conflictLookAheadDaysInteger360Days ahead to scan for time-slot conflicts against existing records. One setting; reduce for performance on high-volume objects.
conflictBehaviorStringblockblock — conflicting slots are greyed out and unclickable. warn — conflicting slots show a warning but can still be selected.

Consolidated Time Span

PropertyTypeDefaultDescription
consolidateTimeSpanBooleanfalseWhen ON, adjacent selected time slots are merged into a single record with one start time and one end time.

Status & Visual Properties

PropertyTypeDefaultDescription
statusFieldString—API name of a status field on the related object for color coding.
statusColorsString—Comma-separated mapping: Confirmed:green,Pending:orange,Cancelled:red.
statusColorDisplayStringbothWhere to show status colors: grid (time slots only), calendar (date cells only), or both.
hideBookingsWithStatusString—Records with this status are hidden from the grid entirely.
statusFieldLabelString—Custom display label for the status field in edit mode.
hoverFieldsString—Comma-separated field API names for tooltip on hover.

Edit Mode Properties

PropertyTypeDefaultDescription
enableEditModeBooleanfalseWhen ON, shows an Edit Mode toggle for managing existing records inline.
editButtonLabelString—Custom label for the Edit Mode toggle button.
editRecordDisplayString—Controls how records are displayed during editing.

Constraint Properties

All constraint properties from Date are available: maxSelections, allowPastDates, minDate, maxDate, defaultDates, disabledDates, availableDates, autoJumpToFirstAvailable.

Record Name Properties

All from Dates: recordNameField, defaultRecordName, appendDateTimeToName.

Output Properties (Read-Only)

PropertyTypeDescription
selectedDatesString[]Array of selected dates in ISO format, without time.
selectedDatesWithTimesJsonStringJSON string with each date and its selected time(s). Feed to MultiDatePickParser for loopable entries.
selectedDateRangesJsonStringJSON of consecutive dates grouped into ranges. Only when outputAsJson is ON.

Record Page Click-to-Save Properties

All auto-save properties from Date are available: saveButtonLabel, relatedObjectApiName, dateFieldApiName, endDateField, relationshipFieldApiName, preloadExistingDates, preloadMode, staticRecordId, parentRecordIdField, blockedDatesSourceObject, blockedDatesDateField, blockedDatesFilterField.