Timesheet.js parar mostrar eventos en el tiempo



Timesheet.js parar mostrar eventos en el tiempo, este plugin es una sencilla biblioteca JavaScript para crear hojas  HTML y en conjunto con CSS3, la idea es mostrar información a través de tiempos en una línea de tiempo horizontal, lo importante de este plugin es que los datos puedes ponerlos de manera dinámica.
No es necesario utilizar ningún framework como jQuery, los estilos pueden ser de cualquier diseño, no obstante tienes que utilizar el diseño que maneja la librería timesheet debido a que ahí están el manejo de las barras, puedes cambiar los colores de la librería modificando el archivo css que está en el directorio dist/timesheet.css.

Para usarlo simplemente tienes que hacer referencia a los archivos css y js que están en el directorio dist

<script type="text/javascript" src="dist/timesheet.js"></script>
<link rel="stylesheet" type="text/css" href="dist/timesheet.css" />

Posteriormente en el cuerpo del documento html puedes integrar el siguiente fragmento de código conservando la etiqueta div con el id correspondiente:

<div id="timesheet"></div>

Los datos los incluyes en una linea de codigo entre las etiquetas script

<script>
new Timesheet('timesheet', 2002, 2013, [
  ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
  ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
  ['2003', 'Had very bad luck'],
  ['10/2003', '2006', 'At least had fun', 'dolor'],
  ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
  ['07/2005', '09/2005', 'Bad luck again', 'default'],
  ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
  ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
  ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
  ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
  ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
]);
</script>

El formato para modificar dichos datos son los siguientes

  ['2002', '09/2002', 'A freaking awesome time', 'lorem']
//  [fecha inicial,fecha final, texto,color],
 

Demsotración:http://semu.github.io/timesheet.js/

You may also like...