Junho de 2008
Observação: Este é um projeto de código aberto iniciado por um Googler, e não por uma biblioteca. Convidamos todas as pessoas interessadas em participar e contribuir :)
Introdução
Você já quis criar uma experiência de agenda personalizada no seu site usando dados do Google Agenda, mas não sabe como apresentar os dados da agenda visualmente? Parece que há um bom número de desenvolvedores que compartilham esse dilema. Embora a API de dados do Google Agenda seja uma API de serviço da Web avançada, porque você pode explorar os recursos de todos os seus dados do Google Agenda, ela continua sendo uma API de dados para leitura/gravação pura e nenhuma disposição para visualização de dados.
Neste artigo, vamos demonstrar um exemplo de biblioteca que escrevi para aliviar esse problema. Eu comecei o projeto de código aberto, a Agenda (CalVis), que busca fornecer uma interface do usuário (IU) fácil e personalizável para apresentar dados da conta do Google Agenda. O CalVis extrai dados diretamente da sua conta do Google Agenda usando a API Google Calendar Data. Observação do editor:a partir da v3, o Google Agenda não usa mais o formato de dados do Google. Ele usa a biblioteca de cliente JavaScript de dados do Google abaixo para se comunicar com o Google Agenda e foi projetado para maximizar a flexibilidade na personalização.
O CalVis foi desenvolvido para poupar os desenvolvedores de recriar a rica experiência de IU da agenda. Os desenvolvedores podem usá-lo como um contêiner de modelos personalizável para sobrepor dados do Google Agenda. Os desenvolvedores podem usar o CalVis para renderizar dados da agenda e alcançar um nível profundo de integração personalizada com os sites. Como você vai aprender, uma interface desenvolvida com base no CalVis é totalmente personalizável por meio de JavaScript, HTML e CSS. Os desenvolvedores podem implantar uma interface de agenda personalizada de maneira rápida e fácil com um conjunto de componentes de controle de agenda essenciais para renderizar dados da agenda.
Como usar o CalVis
Siga as etapas abaixo para começar a usar o CalVis no seu desenvolvimento.
Etapa 1: carregar a biblioteca do Layout do Google Agenda
Primeiro você precisa incluir o carregador no seu arquivo HTML. Esse carregador carrega dinamicamente as principais classes do CalVis, bem como suas bibliotecas dependentes (como a biblioteca de cliente JavaScript de dados do Google).
<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>
Etapa 2: use a folha de estilo CSS para descrever os atributos de estilo.
O arquivo CSS padrão produzirá uma aparência e aparência semelhante a este exemplo. É possível fazer o download e personalizar esse arquivo CSS para ter uma aparência totalmente diferente.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Etapa 3: definir a estrutura visual da interface da agenda com HTML
O CalVis tem vários componentes visuais predefinidos que compõem a interface da agenda. A organização desses componentes da interface é definida pelo layout HTML.
Os componentes da IU do CalVis são os seguintes:
-
Controle de login (somente para agendas privadas)
Esse é o componente HTML que fornece o link de login/saída.
-
Controle de status
Este é o componente HTML que fornece informações de status ou erros.
-
Controle de navegação
É o componente HTML que renderiza a navegação da agenda em relação à visualização atual.
-
Controle de visualização
Este é o componente HTML que renderiza a seleção de visualização da agenda. Somente as visualizações de mês ou de semana estão disponíveis nesta versão.
-
Corpo da agenda
É o componente HTML que renderiza a agenda real. Com grades para designar células de data individuais.
-
Exibição de eventos
Este é o componente HTML que renderiza os detalhes de um evento em um acionador de evento. Somente os acionadores de eventos de "clique" e "mouseover" são compatíveis com esta versão.
Um exemplo de como organizar visualmente esses componentes usando uma estrutura de tabela 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>
|
|
Etapa 4: inicializar e configurar o CalVis com JavaScript
Você pode personalizar qualquer comportamento ou aparência usando o JavaScript. Lembre-se que antes de poder modificar um objeto no JavaScript, ele deve ser carregado pelo navegador. Portanto, primeiro você precisa esperar até que todas as bibliotecas dependentes sejam carregadas com o carregador do CalVis. Isso é feito com o método calvis.ready(). Esse método usa um método de callback que será invocado quando todas as bibliotecas forem carregadas e o CalVis estiver pronto para ser usado.
window.onload = function() {
calvis.ready(callback);
}
Na função de callback, você vai instanciar uma instância do objeto calvis.Calendar. Agora você precisa atribuir os vários IDs do CSS, que são definidos no layout HTML na etapa 3, para mapear os componentes da IU da agenda correspondentes.
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');
Agora você pode especificar de qual conta do Google Agenda o CalVis está extraindo dados. Para especificar uma agenda pública, siga estas etapas:
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
Para especificar uma agenda particular, você também precisa especificar o componente HTML que corresponda ao botão de login:
// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');
Para exibir detalhes do evento, você precisa fornecer um método de callback para que, quando uma lista de eventos na agenda for acionada (evento "click" ou "mouseover"), o callback seja invocado para exibir os detalhes do evento. Um exemplo de callback de exibição de um 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 fim, defina a visualização padrão da agenda (visualização "mês" ou "semana") e invoque o método render() para mostrar a IU da agenda:
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Personalizar o estilo
Para personalizar o tamanho, a cor ou o estilo de uma célula de data, basta modificar os atributos de estilo CSS de algumas classes predefinidas. Por exemplo, é possível modificar a largura e a altura de cada célula de data na visualização do mês substituindo a classe CSS padrão monthViewCell e contentCell.
Demonstração
Esta demonstração demonstra o uso do CalVis com o estilo padrão.
Esta demonstração mostra como usar o CalVis com personalização para criar um mashup com a API Google Maps e YouTube.
Contribuir
CalVis é um projeto de código aberto que tem o código-fonte disponível para download por meio do Subversion no Google Code Project Hosting.
Recursos