Probably best way is to use multiple field group fields (provided by CB Field Groups plugin) and a couple of other fields to define the times. Below is the expected number of fields, types, and a few of their parameters that you'd need to set.
All fields here should be set to display on 1 line without a title. Below example configuration.
cb_businessdays
Parameters > Field Group
Fields: cb_businessday, cb_businessopen, cb_businesstime
Button Label: Add Day
Group Limit: 7
Parameters > Display
Custom Display Rows:
Code:
<div class="d-flex" style="gap: 0.25rem">
<div class="flex-shrink-0" style="min-width: 100px">[field_cb_businessday]</div>
[cb:if cb_businessopen!="1"]<div class="flex-shrink-0">[field_cb_businessopen]</div>[/cb:if]
[cb:if cb_businessopen="1"]<div>[field_cb_businesstime]</div>[/cb:if]
</div>
Custom Edit Rows:
Code:
<div class="d-flex" style="gap: 0.25rem">
<div class="flex-shrink-0">[field_cb_businessday]</div>
<div class="flex-shrink-0">[field_cb_businessopen]</div>
<div>[field_cb_businesstime]</div>
</div>
cb_businesstime
Parameters > Field Group
Fields: cb_businessstart, cb_businessend
Button Label: Add Time
Group Limit: 4
Parameters > Display
Display Template: Compact
Custom Display Rows:
Code:
<div>[field_cb_businessstart][cb:if cb_businessend!="24_hours"] - [field_cb_businessend][/cb:if]</div>
Display Field Format: None
Display Empty Fields: No
Edit Template: Compact
Custom Edit Rows:
Code:
<div>[field_cb_businessstart] - [field_cb_businessend]</div>
Edit Field Format: None
Integrations > CB Conditional
Display: Field conditional show
Field: cb_businessopen
Operator: Equal To
Value: 1
For the Start and End code select fields I used the below to help generate the time selection dropdowns. Time fields felt like they were too much for this usage.
Parameters > Code
Code:
$times = [ '24_hours' => '24 Hours' ];
for ( $i = 1, $n = 12; $i <= $n; $i++ ) {
$times[$i . '_00_AM'] = $i . ':00 AM';
$times[$i . '_15_AM'] = $i . ':15 AM';
$times[$i . '_30_AM'] = $i . ':30 AM';
$times[$i . '_45_AM'] = $i . ':45 AM';
}
for ( $i = 1, $n = 12; $i <= $n; $i++ ) {
$times[$i . '_00_PM'] = $i . ':00 PM';
$times[$i . '_15_PM'] = $i . ':15 PM';
$times[$i . '_30_PM'] = $i . ':30 PM';
$times[$i . '_45_PM'] = $i . ':45 PM';
}
return $times;
All of the above combined gets you the following.
Profile Edit/Registration:
Profile View:
krileon
