<div>
    <table class="formTable">
								
		<tr>
			<td>Min hours:</td>
			<td class="right"><div data-dojo-attach-point="minHoursEditor" data-dojo-type="dijit.form.NumberSpinner" value="8" data-dojo-props="constraints:{min:0, max:23}, intermediateChanges:true"></div></td>
		</tr>
				
		<tr>
			<td>Max Hours:</td>
			<td class="right"><div data-dojo-attach-point="maxHoursEditor" data-dojo-type="dijit.form.NumberSpinner" value="18" data-dojo-props="constraints:{min:1, max:24}, intermediateChanges:true"></div></td>
		</tr>
				
		<tr>
			<td>Hour size(px):</td>
			<td class="right"><div data-dojo-attach-point="hourSizeEditor" data-dojo-type="dijit.form.NumberSpinner" value="100" data-dojo-props="constraints:{min:0, max:500}, intermediateChanges:true, smallDelta:25" ></div></td>
		</tr>
		
		<tr>
			<td>Timeslot (minutes):</td>
			<td class="right">
				<select data-dojo-attach-point="timeSlotEditor" data-dojo-type="dijit.form.ComboBox" style="width:80px;" >
					<option value="15" selected>15</option>									
					<option value="30">30</option>
					<option value="60">60</option>
				</select>
			</td>
		</tr>
		
		<tr>
			<td>Row Header Grid Timeslot:</td>
			<td class="right">
				<select data-dojo-attach-point="rhgtimeSlotEditor" data-dojo-type="dijit.form.ComboBox" style="width:80px;" >																	
					<option value="15">15</option>									
					<option value="30">30</option>
					<option value="60" selected>60</option>
				</select>
			</td>
		</tr>
		
		<tr>
			<td>Row Header Label Timeslot:</td>
			<td class="right">
				<select data-dojo-attach-point="rhltimeSlotEditor" data-dojo-type="dijit.form.ComboBox" style="width:80px;" >
					<option value="15">15</option>
					<option value="30">30</option>
					<option value="60" selected>60</option>
				</select>
			</td>
		</tr>
		
		<tr>
			<td>Row Header Label offset:</td>
			<td class="right"><div data-dojo-attach-point="rhoEditor" data-dojo-type="dijit.form.NumberSpinner" value="2" data-dojo-props="constraints:{min:-20, max:20}, intermediateChanges:true" ></div></td>
		</tr>
		
		
		<tr>
			<td>Overlap (%):</td>
			<td class="right"><div data-dojo-attach-point="overlapEditor" data-dojo-type="dijit.form.NumberSpinner" data-dojo-props="value:70, constraints:{min:0, max:100}, intermediateChanges:true, smallDelta:10" style="width:80px"></div></td>
		</tr>
		
		<tr>
			<td>Horizontal gap (px):</td>
			<td class="right"><div data-dojo-attach-point="hGapEditor" data-dojo-type="dijit.form.NumberSpinner" data-dojo-props="constraints:{min:0, max:30}, value:2, intermediateChanges:true, disabled:true"></div></td>
		</tr>
		
	</table>
	<table class="formTable" style="margin-top:10px">

		<tr>
			<td>Row header format:</td>
			<td class="right"><div data-dojo-attach-point="rowHeaderFormatEditor" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'ex: h a'"></div></td>
		</tr>
		
		<tr>
			<td>Column header format:</td>
			<td class="right"><div data-dojo-attach-point="columnHeaderFormatEditor" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'ex: EEE MMM, dd'"></div></td>		
		</tr>
		
		<tr>
			<td colspan="2" style="text-align:right;padding-top:5px;padding-right:5px"><button data-dojo-attach-point="dateFormatButton" data-dojo-type="dijit.form.Button">Apply formats</button></td>
		</tr>
	
	</table>

</div>
		    
