Gracias por tu respuesta y por las opciones, pero necesito hacerlo manual.
Tal cual como dijiste se me ocurrió hacer una tabla que se vaya generando dependiendo de la cantidad de tareas, por lo que cada fila ya la tengo identificada en esta iteración. Toda celda (<td>) esta identificada con una id única por lo que puedo hacer lo que dices: pintar las celdas con condición dependiendo de la fecha inicial y final.
1) Tengo 3 celdas con 3 id diferentes, cuando la tarea comienza se le da la siguiente condición de diseño
Código:
background: linear-gradient(90deg, #fff 70%, #00cc00 70%);
2) Cuando termina la siguiente condicion de diseño
Código:
background: linear-gradient(90deg, #00cc00 30%, #fff 30%);
3) Las celdas correspondientes a las fechas intermedias entre la fecha inicial y final le doy la siguiente condicion de diseño:
Código:
background-color: #00cc00;
4) Finalmente se general lineas que muestran lo que quiero, pero luego necesito hacerle clic en ella para mostrar el detalle de la tarea. ¿Como puedo hacerlo pensando que en el ejemplo debería poder hacer clic en todo lo pintado? Talves para celdas completas no sea tan difícil, pero para las celdas que ocupan el inicio y el final de una tarea no me lo imagino
¿Sera mejor con imágenes?¿Sera mejor con divs?
¿Podrían darme un ejemplo de como podría hacer la condición de diseño con javascript?