<div id="cal-day-box">
	<div class="row-fluid clearfix cal-row-head">
		<div class="time-col cal-cell"><%= cal.locale.time %></div>
		<div class="events-col"><%= cal.locale.events %></div>
	</div>
	<% if(all_day.length) {%>
		<div class="row-fluid clearfix cal-day-hour">
			<div class="time-col" style="height: <% print(((all_day.length+1)*35) + 15) %>px"><b><%= cal.locale.all_day %></b></div>
			<div class="events-col" style="top: -<% print((all_day.length*35)+15) %>px">
				<% _.each(all_day, function(event){ %>
					<div class="day-highlight dh-<%= event['class'] %>">
						<a href="<%- event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
						   data-event-class="<%= event['class'] %>" class="event-item">
							<%= event.title ? event.title : (event.url ? event.url : null) %></a>
					</div>
				<% }); %>
			</div>
		</div>
	<% }; %>
	<% if(before_time.length) {%>
		<div class="row-fluid clearfix cal-day-hour">
			<div class="time-col" style="height: <% print(((before_time.length+1)*35) + 15) %>px"><b><%= cal.locale.before_time %></b></div>
			<div class="events-col" style="top: -<% print((before_time.length*35)+15) %>px" >
				<% _.each(before_time, function(event){ %>
					<div class="day-highlight dh-<%= event['class'] %>">
						<span class="cal-hours pull-right"><%= event.end_hour %></span>
						<a href="<%- event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
						   data-event-class="<%= event['class'] %>" class="event-item">
							<%= event.title ? event.title : (event.url ? event.url : null) %></a>
					</div>
				<% }); %>
			</div>
		</div>
	<% }; %>
	<div id="cal-day-panel" class="clearfix cal-day-panel-class">
		<div id="cal-day-panel-hour" class="cal-day-panel-hour-class">
			<% for(i = 0; i < hours; i++){ %>
				<div class="cal-day-hour">
					<% for(l = 0; l < cal._hour_min(i); l++){ %>
						<div class="row-fluid cal-day-hour-part">
							<div class="time-col"><b><%= cal._hour(i, l) %></b></div>
							<div class="events-col"></div>
						</div>
				<% }; %>
				</div>
			<% }; %>
		</div>
		
		<% _.each(by_hour, function(event){ %>
			<div class="pull-left day-event day-highlight dh-<%= event['class'] %>" style="margin-top: <%= (event.top * 30) %>px; height: <%= (event.lines * 30) %>px; <% if (by_hour.length > 3) {print('max-width: 100px;')}  %> ">
				<span class="cal-hours"><%= event.start_hour %> - <%= event.end_hour %></span>
				<a href="<%- event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
				   data-event-class="<%= event['class'] %>" class="event-item">
					<%= event.title ? event.title : (event.url ? event.url : null) %></a>
			</div>
		<% }); %>
	</div>
	<% if(after_time.length) {%>
	<div class="row-fluid clearfix cal-day-hour">
		<div class="time-col" style="height: <% print(((after_time.length+1)*35) + 15) %>px" ><b><%= cal.locale.after_time %></b></div>
		<div class="events-col" style="top: -<% print((after_time.length*35)+15) %>px" >
			<% _.each(after_time, function(event){ %>
			<div class="day-highlight dh-<%= event['class'] %>">
				<span class="cal-hours pull-right"><%= event.start_hour %></span>
				<a href="<%- event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
				   data-event-class="<%= event['class'] %>" class="event-item">
					<%= event.title ? event.title : (event.url ? event.url : null) %></a>
			</div>
			<% }); %>
		</div>
	</div>
	<% }; %>
</div>
