Cargando

Ir a contenido


 


Crear calendario de publicaciones con JavaScript

En este tutorial te mostramos cómo crear un calendario de publicaciones con JavaScript y el API de Google Calendar.


Escrito por el sep 03 2015 18:14 javascript googlecalendar



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.

Incluyendo el 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.

Opciones del calendario

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.

Fichero Adjunto  calendario_publicaciones.html   1,79K   30 Descargas

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 03 2015 18:14
  •   Visitas 1.2K
  •   Nivel
    Profesional



Tutoriales Relacionados


1 Comentarios


Roberto Gomez
sep 05 2015 11:41

Me encanta! gracias Solvetic

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse