Pocisionar elementos en un planning

[sefirotxx]

Hola estimados, me encuentro en un nuevo proyecto y estoy atascado con la idea. Pregunte en el foro de PHP pero no recibi respuesta. Investigue y probablemente lo que quiero hacer se pueda hacer por javascript

Necesito por favor me hagan una lluvia de ideas de como poder hacer lo que quiero.

1) Necesito armar un planning de 15 días, en donde las columnas sean las fechas desde la actual hasta el día 15 despues de este.
Esto ya lo resolví, hice una funcion que lo calcula todo y puedo utilizar la información para agregarlos a las cabeceras como corresponden. Asimismo hice una funcionalidad para desplazarme días hacia adelante y hacia atrás.

2) La parte de las filas son las tareas, con la funcionalidad de que dependiendo la cantidad de tareas me de los div correspondientes.
También lo tengo resuelto, solo cuento las tareas e imprimo los div en relación a esto.

3) Finalmente debo posicionar un elemento en el planning que represente la duración de la tarea, capturando su fecha de inicio y de termino desde la base de datos y la id de la tarea. Es esto lo que no me puedo imaginar (necesito imaginar como puede ser para empezar a desarrollarlo)
En este caso pienso que puedo dejar los 15 div de las columnas de fechas estáticos por que siempre serán 15 y los div de las tareas los agrego por condición (dependiendo de cuantos sean, dentro de los div de fechas, quedando como una tabla. Los div de fechas (columnas) los puedo identificar por un ID que sea la fecha exacta y los div de filas por el ID de la tarea.

Tirenme ideas, como puedo posicionar un elemento, pintar el div o agregar otros segun las condiciones anteriores. Adjunto imagen de mi idea:

[/QUOTE]

** Averigüe también sobre el uso de div vs tabla y finalmente decante por usar una tabla para el planning ya que los div generalmente se usan para maqueta la pagina. Cada celda esta identificada con una id = "d-m-Y"

[ZedGe1505]

No se si alguno de estos JS podría servirte.. tendrías que modificar todo eso sí...


Opcion 1

Opcion 2

Si no, podrías asignarle a tus columnas números como ID del 1 al 15, luego agregas tu fila de tarea y preguntas por el ID que contiene la fecha de inicio, luego de eso (Por ejemplo comienza en ID 4 y dura 5 días) pintas del ID 4 al 9.


Obviamente debes validar que no pase de tu rango de fecha, es decir que no trate de buscar una fecha mayor a tus 15 días o por el contrario menor a los 15 días.

[sefirotxx]

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?

[ZedGe1505]

Te dejo un código que hice a la rápida en el trabajo...


Debes adaptarlo a que te muestre en la primera fila las fechas y que la función reciba como parametro tus tareas.

Código Javascript:

function genera_tabla() {
  // Obtener la referencia del elemento body donde insertaras tu tabla
  var body = document.getElementsByTagName("body")[0];
 
  // Crea un elemento <table> y un elemento <tbody>
  var tabla   = document.createElement("table");
  var tblBody = document.createElement("tbody");
 
  //Variables de la duración de la tarea
  //Comienza en mi fecha 5 de las 15 que muestro
    var idFechaInicial=5; 
  //Durará 15 días
  var duracion=5;
  var aux = duracion;
  
  
  // Crea las celdas
  for (var i = 0; i < 2; i++) {
    // Crea las hileras de la tabla
    var hilera = document.createElement("tr");
    for (var j = 0; j < 15; j++) {
      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
      // texto sea el contenido de <td>, ubica el elemento <td> al final
      // de la hilera de la tabla
 
            //Si la fecha esta entre la fecha 5 y los próximos 5 días y no es la primera fila
      if((j+1)>=idFechaInicial && aux>0 && i>0){
        var celda = document.createElement("td");
        //Inicio de la tarea
        if((j+1)==idFechaInicial)
            celda.style.backgroundColor = "yellow"; 
        //Días intermedios
        else if(aux==1)
            celda.style.backgroundColor = "blue"; 
        //Final de la tarea
        else
            celda.style.backgroundColor = "red"; 
         
        //Llamas una funcion cuando hace click en algun dia de la tarea 
        celda.onclick = function (){click()};
         
        var textoCelda = document.createTextNode("Tarea 1");
        aux--;
      }
      //Si corresponde a la primera columna (tus fechas)
      else if(i==0){
        var celda = document.createElement("td");
        var textoCelda = document.createTextNode("Fecha "+(j+1));
       }
       //Si es una fecha en que tu tarea no se ejecuta
       else{
            var celda = document.createElement("td");
            var textoCelda = document.createTextNode(" ");
       }
      celda.appendChild(textoCelda);
      hilera.appendChild(celda);
    }
 
    // agrega la hilera al final de la tabla (al final del elemento tblbody)
    tblBody.appendChild(hilera);
  }
 
  // posiciona el <tbody> debajo del elemento <table>
  tabla.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tabla);
  // modifica el atributo "border" de la tabla y lo fija a "2";
  tabla.setAttribute("border", "1");
}
 
function click(){
    alert("Aquí hay una tarea =D")
}
 
genera_tabla();
 

DEMO