Junio de 2008
Nota: Este es un proyecto de código abierto que inició un Googler y no es una biblioteca con asistencia oficial. Invitamos a todas las personas interesadas a unirse y participar :)
Introducción
¿Alguna vez quisiste crear una experiencia de calendario personalizada en tu sitio web con los datos del Calendario de Google, pero no sabías cómo presentar los datos del calendario de forma visual? Parece que muchos desarrolladores comparten este dilema. Si bien la API de Google Calendar Data es una potente API de servicio web, ya que te permite aprovechar la riqueza de todos tus datos de Calendario de Google, sigue siendo una API de datos de lectura y escritura pura sin provisión para la visualización de datos.
En este artículo, demostraré una biblioteca de ejemplo que escribí para aliviar este problema. Comencé el proyecto de código abierto Calendar Visualization (CalVis), cuyo objetivo es proporcionar una interfaz de usuario (IU) fácil de usar y personalizable para presentar datos de la cuenta de Calendario de Google. CalVis extrae datos directamente de tu cuenta de Calendario de Google a través de la API de Google Calendar Data. (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 JavaScript de Google Data para comunicarse con Google Calendar y está diseñada para maximizar la flexibilidad en la personalización.
CalVis está diseñado para evitar que los desarrolladores tengan que volver a crear la experiencia de IU de calendario enriquecida. Los desarrolladores pueden usarlo como un contenedor de plantillas personalizable para superponer datos de Calendario de Google. Los desarrolladores pueden usar CalVis para renderizar datos del calendario y lograr un nivel profundo de integración personalizada con sus sitios. Como aprenderás, una interfaz creada sobre CalVis se puede personalizar por completo con JavaScript, HTML y CSS. Los desarrolladores podrían implementar de forma rápida y sencilla una interfaz de calendario personalizada con un conjunto de componentes de control de calendario esenciales para renderizar los datos del calendario.
Uso de CalVis
Los siguientes pasos te ayudarán 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 de forma dinámica las clases principales de CalVis, así como sus bibliotecas dependientes (como la biblioteca cliente de JavaScript de Google Data).
<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 producirá una apariencia predeterminada similar a este ejemplo. Puedes descargar este archivo CSS y personalizarlo para que tenga un aspecto completamente 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 en tu diseño HTML.
Los componentes de la IU de CalVis son los siguientes:
-
Login Control (solo para calendarios privados)
Este es el componente HTML que proporciona el vínculo de acceso o salida.
-
Status Control
Este es el componente HTML que proporciona información de estado o errores.
-
Navigation Control
Es el componente HTML que renderiza la navegación del calendario con respecto a la vista actual.
-
View Control
Este es el componente HTML que renderiza la selección de la vista de calendario. En esta versión, solo están disponibles las vistas de mes o semana.
-
Cuerpo del calendario
Este es el componente HTML que renderiza el calendario real. Con cuadrículas para designar celdas de fechas individuales
-
Visualización de eventos
Es el componente HTML que renderiza los detalles del evento cuando se activa un evento. En esta versión, solo se admiten los activadores de eventos "click" y "mouseover".
Ejemplo de cómo organizar visualmente estos componentes con una estructura de tabla HTML básica:
<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 cualquier comportamiento o apariencia con JavaScript. Ten en cuenta que, antes de modificar un objeto en JavaScript, el navegador debe cargarlo primero, por lo que primero debes esperar a que todas las bibliotecas dependientes se carguen con el cargador de 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 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 distintos IDs de CSS (se definen a partir del diseño HTML en el paso 3) para que se asignen a los componentes de la IU del calendario correspondientes.
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 debe extraer datos CalVis. Para especificar un calendario público, sigue estos pasos:
// 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 un evento de "clic" o "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 eventos:
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('');
}
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Personaliza el diseño
Para personalizar el tamaño, el color o el estilo de una celda de fecha individual, solo debes modificar los atributos de diseño de CSS de algunas clases de CSS predefinidas. Por ejemplo, puedes modificar el ancho y la altura de cada celda de fecha en la vista mensual anulando las clases CSS predeterminadas monthViewCell y contentCell.
Demostración
En esta demostración, se muestra el uso de CalVis con el diseño predeterminado.
En esta demostración, se muestra cómo usar CalVis con personalización para crear una combinación con las APIs de Google Maps y YouTube.
Contribuir
CalVis es un proyecto de código abierto cuyo código fuente está disponible para descargar a través de Subversion en Google Code Project Hosting.
Recursos