Calendario con jQuery

A menudo los calendarios pueden ser útiles para registrar diversos eventos en una página web. En este artículo veremos cómo crear un calendario con jQuery usando el plugin fullCalendar. Este plugin ofrece muchas opciones para modificar a gusto el calendario, es por ese motivo que para mi es el mejor.

Así es como se ve este maravilloso plugin de calendario con jQuery ya insertado en una página web:

Antes de empezar es necesario descargar el plugin fullCalendar desde su sitio web fullcalendar.io/download.

Creando un calendario con jQuery y Java Script

Primero es necesario importar el plugin y sus dependencias en nuestro código html usando el tag script:

<link href='mipath/fullcalendar.css' rel='stylesheet' />
<link href='mipath/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='mipath/moment.min.js'></script>
<script src='mipath/lib/jquery.min.js'></script>
<script src='mipath/fullcalendar.min.js'></script>

Tener en cuenta que se debe cambiar “mipath” por la ubicación real del archivo. Una vez importadas las dependencias podemos empezar a crear nuestro calendario en jquery. Esta tarea se puede hacer en muy pocas lineas de código:

 <div id='calendar'></div>
 <script>
    $(document).ready(function() {
      $('#calendar').fullCalendar();
    });
 </script>

Obviamente que ese calendario no tendrá eventos ni funcionalidad. Ahora si quisiéramos agregarle algunos eventos al crearlo, podríamos pasárselos como parámetro de la siguiente manera:

$('#calendar').fullCalendar({
  events: [
  {
    title: 'Ejemplo de evento',
    start: new Date()
  },
  {
    title: 'Ejemplo de evento 2',
    start: new Date()
  }]
});

Y si quisiéramos agregar un evento al clickear un botón o en el resultado de una petición AJAX, podríamos hacerlo utilizando el evento renderEvent:

$('#calendar').fullCalendar( 'renderEvent', {
    title: 'Ejemplo de evento 3',
    start: new Date()
});

Además de manipular eventos este plugin permite ser configurado para cambiarle el idioma, estilos, visibilidad del menú y muchas otras cosas más que pueden ser vistas en los ejemplos que vienen incluidos al descargarse este maravilloso plugin.

Espero que les sea de gran utilidad este artículo y ante cualquier inconveniente o sugerencia que tengan no duden en dejar un comentario.