Hvordan at oprette din egen widget kalender for et websted

Yahoo! UI Library hjemmeside for Kalender widget API Skærmbillede taget af forfatteren.

Selv om det er muligt at skabe en kalender-widget fra bunden for en hjemmeside fra flash eller java script, der er en række velkendte og afprøvede kalender programming interfaces til rådighed for webudvikler gratis på internettet i dag.Yahoo! 'S UI (User Interface) Biblioteket har en let konfigurerbar kalender widget, der kan bruges med enhver hjemmeside eller blog.Da Yahoo! gør API til rådighed for bygherren uden beregning, kan det også blive udvidet til at opfylde Web Developer behov, hvis der ikke er nok funktionalitet til det ønskede program.

hvad du har brug

  • Yahoo! konto

Instruktioner

  1. Medtag Javascript og overlappende typografiark afhængigheder kræves for kalenderen widget i websiden.
    & lt;! - CSS-fil (standard YUI Sam Skin) - & gt;
    & lt; link rel = "stylesheet" type = "text / css" href = "http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css" & gt;
    & lt;! - Afhængigheder - & 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;! - Kilde fil - & gt;
    & lt; script type = "text / javascript" src="</script">http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>

  2. Påfør yui-skin-sam klasse til et element i den webside, der vil blive betragtet som en forælder i kalenderen widget.Hvis du er usikker, kan dette anvendes på & lt; body & gt;tag på websiden.
    & lt; krop class = "yui-skin-sam" & gt;

  3. Render Kalender objekt i et & lt; div & gt;element på websiden.
    & lt; div id = "callContainer" & gt; & lt; / div & gt;

  4. Initialiser Kalender objekt.Til avancerede konfigurationer, kan mere information videregives til Kalender constructor baseret ud af den metode definition i Yahoo! UI Library.
    var opkald = ny YAHOO.widget.Calendar ("callContainer");
    call.render ();

    Eksemplet Yahoo! Kalender widget med standardindstillinger anvendt.
  5. Opret en multi-måneders kalender ved at erstatte Kalender initialisering opkald i det forrige trin med følgende opfordring:
    var opkald = ny YAHOO.widget.CalendarGroup ("callContainer");

Tips & amp;Advarsler

  • Før du initialisere Kalender objekt, DIV element bør allerede findes i sidens DOM.Gennemgå de forskellige API muligheder til rådighed for web-udvikler på Yahoo! UI Kalender hjemmeside, hvis standardindstillingerne ikke giver de ønskede oplysninger for kalenderåret widget.Hvis Yahoo! Kalender API ikke har den funktionalitet, der kræves, prøv Google Kalender API før at skabe en kalender widget fra bunden.

Ressourcer

  • Typepad Widgets Google Kalender
  • Yahoo! UI Library Kalender widget til hjemmeside
599
0
2
Webdesign