File: //home/arjun/projects/buyercall/buyercall/assets/components/schedule/templates/schedule.tpl
<div class="row sm-margin-bottom">
<div class="col-xs-11">
<label><%= _('Schedule Timezone') %></label>
<select id="schedule-timezone" class="form-control">
<option>bleh</option>
</select>
</div>
<div class="col-sm-1 tooltip-icon" data-toggle="tooltip" title="Select your time-zone. Your availability will be
set based on your local time-zone.">
</div>
</div>
<div class="row">
<div class="col-xs-11">
<br>
<div>
<label>Available All Hours:</label>
</div>
<div id="divTwentyFourSeven">
<div class="checkbox">
<label>
<input id="chkAllHours" type="checkbox" name="allhours">
</label>
</div>
</div>
</div>
</br></br>
</div>
<div class="row">
<div class="col-xs-4">
<label>Available Days</label>
</div>
<div class="col-xs-4">
<label>Available From</label>
</div>
<div class="col-xs-4">
<label>Available To</label>
</div>
</div>
<div class="container">
<div class="form-group">
<div class="row day-row-sunday">
<div class="col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Sunday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chSunday" type="checkbox" class="dayButton" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-sunday" type="text" class="form-control available-from-sunday" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-sunday" type="text" class="form-control available-to-sunday" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="row day-row-monday">
<div class="col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Monday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chMonday" type="checkbox" class="dayButton" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-monday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-monday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div class="row day-row-tuesday">
<div class="col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Tuesday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chTuesday" type="checkbox" class="dayButton" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-tuesday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-tuesday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div class="row day-row-wednesday">
<div class="col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Wednesday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chWednesday" type="checkbox" class="dayButton" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-wednesday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-wednesday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div class="row day-row-thursday">
<div class="col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Thursday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chThursday" type="checkbox" class="dayButton" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-thursday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-thursday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div class="row day-row-friday">
<div class="col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Friday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chFriday" type="checkbox" class="dayButton" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-friday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-friday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div class="row day-row-saturday">
<div class="col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Saturday</label>
<div class="togglebutton" class="dayButton" style="float:right;">
<label>
<input id="chSaturday" type="checkbox" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-saturday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-saturday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>