Hoe om uw eigen Widget kalender voor een website

Yahoo! UI Bibliotheek homepage voor de Calendar Widget API Screen schot genomen door de auteur.

Hoewel het mogelijk is om een ​​kalender widget vanuit het niets voor een website van flash of java script te maken, zijn er een aantal bekende en geteste kalender programming interfaces beschikbaar om de Web developer voor gratis op het internet vandaag.UI (User Interface) bibliotheek Yahoo! 'S heeft een eenvoudig te configureren kalender widget die kan worden gebruikt met een website of blog.Aangezien Yahoo maakt de API waarover de ontwikkelaar kosteloos kan ook worden uitgebreid tot de behoeften van de Web developer voldoen als er niet voldoende functionaliteit voor de gewenste toepassing.

wat je nodig hebt

  • Yahoo! rekening

instructies

  1. Inclusief de Javascript en cascading style sheet afhankelijkheden die nodig is voor de kalender widget op de webpagina.
    & lt;! - CSS-bestand (standaard YUI Sam Skin) - & gt;
    & lt; link rel = "stylesheet" type = "text / css" href = "http://yui.yahooapis.com/2.6.0/build/calendar/a

    ssets/skins/sam/calendar.css" & gt;
    & lt;! - Afhankelijkheden - & gt;
    & lt; script type = "text / javascript" src="</script">http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    & lt;! - Bron bestand - & gt;
    & lt; script type = "text / javascript" src="</script">http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>

  2. Breng de klasse yui-huid-sam een ​​element binnen de webpagina die wordt beschouwd als een ouder van de kalender widget.Als je onzeker bent, kan dit worden toegepast op de & lt; body & gt;tag van de webpagina.
    & lt; body class = "Yui-skin-sam" & gt;

  3. Render de kalender object in een & lt; DIV & gt;element op de webpagina.
    & lt; div id = "callContainer" & gt; & lt; / div & gt;

  4. Initialiseer de kalender object.Voor geavanceerde configuraties, kan meer informatie worden doorgegeven in de kalender constructeur gebaseerd off van de methode definitie in de Yahoo! UI Library.
    var oproep = new YAHOO.widget.Calendar ("callContainer");
    call.render ();

    Het voorbeeld Yahoo! Calendar widget met de standaardinstellingen toegepast.
  5. Maak een multi-maand kalender door de Calendar initialisatie oproep vervangen in de vorige stap met de volgende oproep:
    var oproep = new YAHOO.widget.CalendarGroup ("callContainer");

Tips & amp;Waarschuwingen

  • Voordat u de agenda-object te initialiseren, het DIV element moet al bestaan ​​in de pagina's DOM.Bekijk de verschillende API-opties beschikbaar om de Web developer bij de Yahoo! UI Kalender website als de standaard instellingen niet de gewenste informatie voor de kalender widget te bieden.Als de Yahoo! Calendar API niet de functionaliteit die nodig hebt, probeer de Google Agenda API voorafgaand aan het creëren van een agenda-widget van de grond af.

Resources

  • Typepad Widgets Google Agenda
  • Yahoo! UI Bibliotheek Calendar Widget Homepage
774
0
2
Web Design