Como criar seu próprio widget de calendário para um site

Escrito por jackson lewis | Traduzido por fernando lopes
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar seu próprio widget de calendário para um site
A página inicial da biblioteca Yahoo! UI para widget de calendário (Screen shot taken by the author.)

Embora seja possível criar um widget de calendário a partir do zero, usando flash ou java script, há um grande número de interfaces para programação de calendário conhecidas e testadas, que estão disponíveis de graça para o desenvolvedor web. A biblioteca Yahoo! UI (interface do usuário) tem um widget de calendário fácil de configurar que pode ser usado em qualquer site ou blog. Uma vez que o Yahoo disponibiliza as API para o desenvolvedor sem custo, elas também podem ser estendidas para atenderem às necessidades do desenvolvedor web, caso não haja funcionalidade suficiente para o aplicativo desejado.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Conta no Yahoo!

Lista completaMinimizar

Instruções

  1. 1

    Inclua no site o Java script e o estilo de efeito cascata na folha necessários para o widget de calendário.

    br /><!--CSS file (default YUI Sam Skin) --> <link rel=\"stylesheet\" type=\"text/css\" href=\"http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css\"> <!-- Dependencies --> <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js\"></script> <!-- Source file --> <script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js\"></script>

  2. 2

    Aplique a classe yui-skin-sam para um elemento dentro da página web, que será considerada pai do widget de calendário. Se estiver inseguro, isso pode ser aplicado à tag <body> da página.

    <body class=\"yui-skin-sam\">

  3. 3

    Transforme o objeto de calendário em um elemento <DIV> na página.

    <div id=\"callContainer\"></div>

  4. 4

    Inicie o objeto Calendário. Para configurações avançadas, mais informações podem ser passadas através do construtor de calendário, a partir do método de definição na biblioteca do Yahoo! UI.

    var call = new YAHOO.widget.Calendar(\"callContainer\") GO call.render();

    Como criar seu próprio widget de calendário para um site
    Inicie o objeto Calendário
  5. 5

    Crie calendários de múltiplos meses substituindo a chamada de inicialização no passo anterior pela seguinte chamada:

    var call = new YAHOO.widget.CalendarGroup(\"callContainer\");

Dicas & Advertências

  • Antes de iniciar o objeto Calendário, o elemento DIV já deve existir no domínio da página.
  • Reveja as várias opções de API disponíveis ao desenvolvedor web na página de calendário do Yahoo! UI, se as definições padrões não fornecerem a informação desejada para o widget de calendário.
  • Se a API do calendário Yahoo! não tiver a funcionalidade requerida, tente usar a API de calendário do Google antes de criar uma widget de calendário a partir do zero.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível