Agenda para el manejo de eventos

[no_se_me_ocurre]

Hola a todos, primero que nada disculpen si este no es el lugar indicado para este post.

Tengo la siguiente situación:
Un formulario donde asocio a un dia muchos eventos, cada evento ocupa una determinada cantidad de horas del dia

Ahora necesitara agrupar estos eventos en "paquetes de 8 hs (ó múltiplos de 8)"
Ej:
si agrego 3 eventos uno de 2 hs otro de 3 hs y otro de 3hs esto cerraría un "paquete" de 8Hs
Si el ultimo evento es de 5 Hs en vez de 3 esto llevaría a que el paquete se cierre en 16hs

Se les ocurre alguna idea de como mostrar esto en una vista ??
Algo asi como una tabla con tres columnas, donde en la primera muestre las horas, en la segunda los paquetes (agrupados en múltiplos de 8) con algún atributo y en la tercera los eventos.


Se agradece cualquier colaboración de antemano
Saludos a todos

[7xtr3am]

pues creo que es buena idea, si al rato se me ocurre otra vengo y te digo

[no_se_me_ocurre]

Gracias 7xtr3am, si se te ocurre alguna idea nueva me vendría muy bien y si es con algo de código mejor, no soy muy bueno en el manejo de html.
Desde ya gracias

[7xtr3am]

lo prometido es deuda jeje, hola mira estaba navegando por ahi, me encontre con esta pagina ZEEYOO y me acorde de ti

http : // www . genbeta.com/web/zeeyoo-crea-encuentros-con-la-mejor-fecha-para-los-invitados

https: // www . zeeyoo.com/

si te fijas en el primer link puedes 'medio' ver la interfaz, espero te sea de ayuda. como no me dejan poner links les puse espacios

[no_se_me_ocurre]

Gracias 7xtr3am,
Intente armar algo pero de nuevo me tope con mi falta de experiencia en HTML

La primer Tabla que pinta las 24 hs tiene el tamaño esperado.
Pero la segunda Tabla que pinta la cantidad de horas que ocupa cada reunión jamas me coincide con la otra respecto del alto esperado (igual al anterior).

En el "for" de la segunda Tabla lo que hago es iterar sobre una lista de eventos y si encuentro "Hs" en el medio o después sin ocupar armo igual un evento vacio para que me lo pinte; de esta forma me aseguro ocupar toda mi Tabla.

El tema esta que a media que voy a agregando eventos la segunda Tabla crece y sobrepasa el alto de la primera.

Pregunta:
Hay alguna forma de fijar el alto de forma que no sobrepase el valor de mi Tabla "Madre" ?? Probe de meterle height="1920" pero si la segunda Tabla crece esta tambien lo hace y me queda la primera mas chica.

O tal vez un nuevo enfoque para encarar este mismo problema
Se escuchan sugerencias.
Desde ya muchas gracias.

Código HTML:

<% int factor = 10; %>
<% int height = 8; %>
<table width="570"  border="0">
	<tr>
		<td width="166">
			<table width="166"  border="0">				
				<tr height="40">
					<th width="166" bgcolor="#9999FF">Horas</th>
				</tr>
				<%
				{
					for (int i = 0; i < 24; i++) {
						%>
						<tr height="<%=height*factor%>">
							<td width="166" bgcolor="<%=(i%2==0)?"#336699":"#C0C0C0"%>"><%=height*factor%> <%=i %> </td>
						</tr>
						
						<%
					}
				}
				%>
			</table>
		</td>			
		<td width="100%" >											  	
			<table width="100%"  border="0">
				<tr height="40">
					<th width="166" bgcolor="#9999FF">Lugar</th>
					<th width="166" bgcolor="#9999FF">Hora Inicio</th>
					<th width="166" bgcolor="#9999FF">Hora Fin</th>				
				</tr>
			<% 
			{
					for (Iterator iterator = events.iterator(); iterator.hasNext();) {
							i++;
							SchedullerEvents eachEvents = (SchedullerEvents) iterator.next();
					heightParam = eachEvents.getSize()*factor;
					%>
					<tr height="<%=heightParam%>">				
						<td width="100%" bgcolor="<%=(i%2==0)?"#336699":"#C0C0C0"%>"> Lugar:<%=lugar%></td>
						<td width="100%" bgcolor="<%=(i%2==0)?"#336699":"#C0C0C0"%>">Hora Inicio<%=horaInicio%></td>
						<td width="100%" bgcolor="<%=(i%2==0)?"#336699":"#C0C0C0"%>">Hora Fin <%=horaFin%></td>
						
					</tr>
					
					<%
				}						 
			}				
			%>				  	
			</table>
		</td>
	</tr>
</table> 

[no_se_me_ocurre]

Lo mejore un poquito y salio andando
Aca dejo el codigo

Código HTML:

<% int factor = 10; %>
<% int height = 8; %>
<table width="100%" cellspacing="0" cellpadding="1" border="1">
	<tbody>
		<tr>
			<td width="166" valign="top" align="right" rowspan="2">
				<table width="166"  cellspacing="0" cellpadding="0" border="0">
					<tbody>					
						<tr height="40">
							<th width="166" bgcolor="#9999FF">Horas</th>
						</tr>
						<%
						{
							for (int i = 0; i < 24; i++) {
								%>
								<tr height="<%=height*factor%>">
									<td width="166" bgcolor="<%=(i%2==0)?"#336699":"#C0C0C0"%>"><%=height*factor%> <%=i %> </td>
								</tr>
								
								<%
							}
						}
						%>
						</tbody>
				</table>
			</td>			
			<td width="100%" valign="top" align="right" rowspan="2">											  	
				<table width="100%"  cellspacing="0" cellpadding="0" border="0">
					<tbody>
						<tr height="40">
							<th width="166" bgcolor="#9999FF">Lugar</th>
							<th width="166" bgcolor="#9999FF">Hora Inicio</th>
							<th width="166" bgcolor="#9999FF">Hora Fin</th>				
						</tr>
						<% 
						{
							for (Iterator iterator = events.iterator(); iterator.hasNext();) {
									i++;
									SchedullerEvents eachEvents = (SchedullerEvents) iterator.next();
							heightParam = eachEvents.getSize()*factor;
							%>
							<tr height="<%=heightParam%>">				
								<td width="100%" bgcolor="<%=(i%2==0)?"#336699":"#C0C0C0"%>"> Lugar:<%=lugar%></td>
								<td width="100%" bgcolor="<%=(i%2==0)?"#336699":"#C0C0C0"%>">Hora Inicio<%=horaInicio%></td>
								<td width="100%" bgcolor="<%=(i%2==0)?"#336699":"#C0C0C0"%>">Hora Fin <%=horaFin%></td>
								
							</tr>
							
							<%
							}						 
						}				
						%>
					</tbody>				
				</table>
			</td>
		</tr>
	</tbody>
</table>