Crear calendario de publicaciones con JavaScript

La funcionalidad de los calendarios en cualquier página web siempre es un agregado interesante, podemos tener desde los famosos datepickers hasta calendarios que muestren actividad de los usuarios en nuestra web.

Para este último podemos usar muchos de los APIs que existen en Internet y de esta forma implementar un calendario de publicaciones que muestre la actividad de los usuarios dentro de nuestro sitio web y esto lo podemos hacer con Google Calendar y su poderoso API.


Para incluir el API de Google Calendar en nuestra página solo necesitamos llamar el mismo en la cabecera de nuestra aplicación, y debemos cargar el mismo con el método load de la siguiente forma:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
	  google.load("visualization", "1.1", {packages:["calendar"]});

Hecho esto inicializamos la función principal la cual tendrá las columnas de nuestro calendario, utilizando el método addColumn y addRows segmentaremos por los años que necesitemos, esto lo hacemos con el método Date, el cual recibirá el año, mes y día, donde adicionalmente pasaremos la actividad que hubo en esa fecha en específico:

var dataTable = new google.visualization.DataTable();
	   dataTable.addColumn({ type: 'date', id: 'fecha' });
	   dataTable.addColumn({ type: 'number', id: 'publi' });
	   dataTable.addRows([
		  [ new Date(2014, 4, 13), 500 ],
		  [ new Date(2014, 4, 14), 800 ],
		  [ new Date(2014, 3, 15), 400 ],
		  [ new Date(2014, 3, 16), 900 ],
		  [ new Date(2014, 3, 17), 600 ],

		  [ new Date(2015, 9, 4), 400 ],
		  [ new Date(2015, 9, 5), 400 ],
		  [ new Date(2015, 9, 12), 250 ],
		  [ new Date(2015, 9, 13), 900 ],
		  [ new Date(2015, 9, 19), 800 ],
		  [ new Date(2015, 9, 23), 900 ],
		  [ new Date(2015, 9, 24), 500 ],
		  [ new Date(2015, 9, 30), 900 ]
	    ]);

Es importante mencionar que por ser un ejemplo utilizamos valores estáticos pero cada quien puede adaptarlo a sus necesidades y generar estos a través de consultas en Base de Datos o con algún framework de JavaScript generar un JSON y hacer la inyección de los mismos para hacerlo de forma más dinámica.


Una vez que hayamos inicializado el calendario solo nos falta agregar las opciones que deseemos, estas opciones son vaciadas en formato JSON para facilidad de manejo y lectura con el API. Podemos definir el título del calendario, la altura, el color de las celdas e incluso como queremos desplegar los días de la semana:

var options = {
		 title: "Calendario de publicaciones",
		 height: 350,
		 calendar: {
		  cellColor: {
	    stroke: '#76a7fa',
	    strokeOpacity: 0.5,
	    strokeWidth: 1,
	  },
	  dayOfWeekLabel: {
	    fontName: 'Times-Roman',
	    fontSize: 12,
	    color: '#1a8763',
	    bold: true,
	    italic: true,
	  },
	  dayOfWeekRightSpace: 10,
	  daysOfWeek: 'DLMMJVS',
    }
	   };

Por último con el método draw, desplegamos el calendario y en el body de nuestro HTML colocamos el div que contendrá el calendario creado:

chart.draw(dataTable, options);

<div id="calendario_publicacion" style="width: 1000px; height: 350px;"></div>

Con esto finalizado veamos como luce nuestro calendario.

Cómo vemos implementar un calendario de publicaciones es sumamente sencillo en nuestro sitio web, ahora solo queda de parte de cada quien extender su funcionalidad y hacerlo más dinámico para adaptarlo a las necesidades del sitio web en el cual sea incluido.