Junio de 2008
Nota: Este es un proyecto de código abierto iniciado por un Googler y no una biblioteca admitida oficialmente. Invitamos a todos los interesados a unirse y contribuir :)
Introducción
¿Alguna vez quisiste crear una experiencia personalizada en tu sitio web usando datos del Calendario de Google, pero no sabes bien cómo mostrarlos de forma visual? Parece que hay una gran cantidad de desarrolladores que comparten este dilema. Si bien la API de datos de Calendario de Google es una potente API de servicio web que permite aprovechar la riqueza de todos sus datos de Calendario de Google, sigue siendo una API de datos de lectura y escritura pura sin almacenamiento de datos.
En este artículo, demostraré una biblioteca de muestra que escribí para aliviar este problema. Inicié el proyecto de código abierto, Visualización del calendario (CalVis), que tiene el objetivo de proporcionar una interfaz de usuario (IU) fácil de personalizar y que presente datos de la cuenta del Calendario de Google. CalVis extrae datos directamente de su cuenta de Calendario de Google a través de la API de datos del Calendario de Google. (Nota del editor: A partir de la versión 3, el Calendario de Google ya no usa el formato de datos de Google). Utiliza la biblioteca cliente de Google Data JavaScript que se encuentra debajo para comunicarse con Calendario de Google y está diseñada para maximizar la flexibilidad de la personalización.
CalVis está diseñado para evitar que los desarrolladores deban recrear la experiencia enriquecida de la IU del calendario. Los programadores pueden usarlo como un contenedor de plantillas personalizable para superponer datos del Calendario de Google. Los desarrolladores pueden usar CalVis para procesar los datos del calendario y lograr un nivel profundo de integración personalizada con sus sitios. Como aprenderás, una interfaz compilada en CalVis se puede personalizar completamente mediante JavaScript, HTML y CSS. Los desarrolladores podrán implementar de forma rápida y sencilla una interfaz de calendario personalizada con un conjunto de componentes esenciales de control de calendario para procesar los datos del calendario.
Usar CalVis
Los siguientes pasos te ayudan a comenzar a usar CalVis para tu desarrollo.
Paso 1: Carga la biblioteca de visualización del calendario
Primero debes incluir el cargador en tu archivo HTML. Este cargador carga dinámicamente las clases principales de CalVis junto con sus bibliotecas dependientes (como la biblioteca cliente de JavaScript de datos de Google).
<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>
Paso 2: Usa la hoja de estilo CSS para describir los atributos de estilo.
El archivo CSS predeterminado generará una apariencia similar a este ejemplo. Puede descargar este archivo CSS y personalizarlo para que se vea diferente.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Paso 3: Diseña la estructura visual de la interfaz del calendario con HTML
CalVis tiene varios componentes visuales predefinidos que conforman la interfaz del calendario. La disposición estructural de estos componentes de la interfaz se define por tu diseño HTML.
Los componentes de la IU de CalVis son los siguientes:
-
Control de acceso (solo para calendarios privados)
Este es el componente HTML que proporciona el vínculo de acceso y salida.
-
Control de estado
Este es el componente HTML que proporciona información de estado o errores.
-
Control de navegación
Este es el componente HTML que procesa la navegación de calendario con respecto a la vista actual.
-
Control de vista
Este es el componente HTML que procesa la selección de vistas del calendario. Solo las vistas de mes o semana están disponibles en esta versión.
-
Cuerpo del calendario
Este es el componente HTML que renderiza el calendario real. Con cuadrículas para designar celdas de fecha individuales.
-
Visualización de eventos
Este es el componente HTML que renderiza los detalles del evento cuando se activa. En esta versión, solo se admiten los activadores de eventos de "clic" y "mouseover".
Un ejemplo de cómo organizar visualmente estos componentes mediante la estructura básica de la tabla HTML
<table style="width: 800px;">
<tr>
<td colspan="2" valign="top">
<div style="float: left;" id="loginControlDiv"></div>
<div style="float: right;" id="statusControlDiv"></div>
</td>
</tr>
<tr>
<td valign="top">
<div id="navControlDiv"></div>
</td>
<td valign="top" align="right">
<div id="viewControlDiv"></div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div id="calendarBodyDiv"></div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div id="eventDisplayDiv"></div>
</td>
</tr>
</table>
|
|
Paso 4: Inicializa y configura CalVis con JavaScript
Puedes personalizar el comportamiento o la apariencia mediante JavaScript. Ten en cuenta que, para poder modificar un objeto en JavaScript, primero el navegador debe cargarlo, por lo que primero debes esperar a que se carguen todas las bibliotecas dependientes con el cargador CalVis. Esto se hace con el método calvis.ready(). Este método toma un método de devolución de llamada que se invocará cuando se carguen todas las bibliotecas y el CalVis esté listo para usarse.
window.onload = function() {
calvis.ready(callback);
}
Dentro de la función de devolución de llamada, crearás una instancia del objeto calvis.Calendar. Ahora, debes asignar los diversos ID de CSS (que se definen desde el diseño HTML en el paso 3) para asignarlos a los componentes correspondientes de la IU del calendario.
var calId = 'developer-calendar@google.com';
var calendar = new calvis.Calendar();
// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');
Ahora puedes especificar de qué cuenta de Calendario de Google se deben extraer los datos. Para especificar un calendario público:
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
Para especificar un calendario privado, también debes especificar el componente HTML que corresponde al botón de acceso:
// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');
Para mostrar los detalles del evento, debes proporcionar un método de devolución de llamada para que, cuando se active una lista de eventos en el calendario (ya sea por medio de un evento de “clic” o de “mouseover”), se invoque la devolución de llamada para mostrar los detalles del evento. Ejemplo de una devolución de llamada de visualización de evento:
calendar.setEventCallback('click', displayEvent);
function displayEvent(event) {
var title = event.getTitle().getText();
var date = event.getTimes()[0].getStartTime().getDate();
var content = event.getContent().getText();
var eventHtml = [;
eventHtml.push(date.toString());
eventHtml.push('<br><br>');
eventHtml.push('<b>Event title:</b> ');
eventHtml.push(title);
eventHtml.push('<br>');
eventHtml.push('<br>');
eventHtml.push('<b>Description:</b>');
eventHtml.push('<p style="font-size: 11px;">');
eventHtml.push(content);
eventHtml.push('</p>');
eventHtml.push('<br>');
document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}
Por último, puede configurar la vista predeterminada del calendario (vista “mes” o “semana”) y, luego, invocar el método render() para que se muestre la IU del calendario.
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Personalizar estilo
Para personalizar el tamaño, el color o el estilo de una celda individual de fecha, solo debes modificar los atributos de estilo de CSS de algunas clases de CSS predefinidas. Por ejemplo, puede modificar el ancho y la altura de cada celda de fecha en su vista de mes. Para ello, anule la clase de CSS predeterminada monthViewCell y contentCell.
Demostración
En esta demostración, se muestra cómo usar CalVis con el estilo predeterminado.
En esta demostración, se demuestra el uso de CalVis con personalización para crear una combinación de Google Maps y la API de YouTube.
Contribuir
CalVis es un proyecto de código abierto, cuyo código fuente está disponible para descargarlo a través de Subversion en Google Code Project Hosting.
Recursos