FullCalendar: cómo insertar un calendario con este plugin jQuery. También sincronizable con Google Calendar.

Creado por Adam Shaw,  FullCalendar es, como dice en su sitio web (con varios ejemplos incluídos), un plugin jQuery que proporciona un completo calendario que se puede alimentar por AJAX (o no, si definimos los eventos en el momento de su creación), y que nos permite incluso arrastrar y soltar eventos, o incluso sincronizarlo con Google Calendar.

Además es ampliamente customizable visualmente, y proporciona controles para capturar eventos tales como el click o el drag and drop (ésto último utilizando jQueryUI) de eventos.

En el sitio web hay muchísima documentación sobre el funcionamiento del plugin, pero vamos a ver cómo incorporar rápidamente este calendario a nuestra página web.

Sigue leyendo

Curso de jQuery (I): Selectores básicos

JavaScript está de moda, eso es un hecho. Y esto es así debido a librerías como jQuery, que simplifican mucho la forma de trabajar con él. Todo lo que se puede hacer con jQuery se puede lograr también con JavaScript directamente, pero teniendo que teclear mucho más código y sufriendo adaptándolo para que funcione en todos los navegadores; jQuery nos libera de ésto y de mucho más.

No soy ningún experto en jQuery, ni mucho menos, pero con este pequeño curso básico intentaré enseñar, de manera práctica, a dar los primeros pasos y de paso pondré en orden lo que he aprendido hasta ahora. Iré mezclando jQuery y también jQueryUI, mostrando cosas básicas de uno y cómo trabajar con controles del otro.

En éste primer post veremos cómo utilizar los selectores básicos de jQuery para interactuar con los diferentes elementos de una página HTML. En la siguiente entrada mostraré otros selectores más avanzados, para no hacer de cada entrada un libro. Pero lo primero de todo es saber cómo incluir jQuery en nuestra web, y qué opciones tenemos. Vamos a ello:

Sigue leyendo

Redimensionar los campos de una tabla con jQuery UI

Gracias a jQuery UI podemos realizar acciones o efectos Javascript que normalmente nos costarían muchas líneas de código con un par de simples líneas. En este caso vamos a ver un sencillo ejemplo de cómo poder redimensionar los campos de una tabla.

Para este ejemplo he creado una página simple y he incluido jQuery y jQuery UI enlazándolos en el código desde su página principal (no olvidemos que lo deseable es descargarlos y linkarlos desde nuestra misma página):

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Lo siguiente es crear una tabla HTML, tan básica o llena de estilos como se desee, para posteriormente añadir en la cabecera de la página el siguiente código javascript:

$(document).ready(function(){
    $(".head_1").resizable();
    $(".head_2").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_3").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_4").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
});

Tras el salto seguiremos explicando qué hace cada cosa.

Sigue leyendo