Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Wie man ein schönes Kalender Widget erstellt

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Im heutigen Premium-Tutorial und Screencast werde ich Ihnen zeigen, wie Sie ein schickes Kalender-Widget erstellen. Wir verwenden CSS3, um ihm ein glänzendes Aussehen zu geben, und fügen dann einige hübsche Funktionen mit JavaScript hinzu.


Schritt 0. Die Idee

Ich folge dem Blog 365PSD, einer wirklich ordentlichen Seite, die jeden Tag eine kostenlose PSD - normalerweise ein kleines Stück UI - anbietet. Für Tag 81 gab es ein wirklich ordentliches Kalender-Widget. Ich dachte, es wäre nicht schwer, das echte Ding zu bauen, also werde ich dir zeigen, wie das heute geht!



Schritt 1. Der HTML-Code

Wir beginnen mit dem Aufbau unserer HTML-Struktur. Natürlich fangen wir mit dem Skelett an:

Also beginnen wir im Körper mit einem div, um alles zu verpacken. dann haben wir drei Hauptabschnitte darin:

Zuerst haben wir div.header; Im Rückblick auf unsere PSD können wir sehen, dass dies dem oberen Teil, dem Abschnitt, der den Monat enthält, den Monatsumschaltern und den Bindungen entspricht. Dann haben wir einen Tisch für die Namen der Tage. Schließlich haben wir einen div#cal-frame. Dies ist das Kalenderraster.

Ich werde Sie auf ein Geheimnis einlassen: Als ich diese Kalender-Benutzeroberfläche ursprünglich erstellt habe, hatte ich nur einen Tisch mit einer Anzeige für die thead Tage und einem Körper tbody für das Kalenderraster; Aber als ich anfing, das JavaScript zu schreiben, um zwischen den Monaten zu wechseln, wurde mir klar, dass ich etwas flexibleres verwenden musste. Sie werden sehen, warum, wenn wir zum JavaScript kommen.

Also, werfen Sie das in diesen Header:

Wir haben hier fünf Elemente; auf der Außenseite haben wir die linken und rechten Kalenderschalter; Da ich in diesem Projekt keine Bilder verwenden wollte, habe ich die HTML-Entities ⟨ und ⟩ (⟨ und ⟩ (, beziehungsweise). Dann haben wir zwei leere Bereiche für die Kalenderbindungen. Schließlich haben wir das Label Monat / Jahr in der Mitte.

Der Inhalt für die table#days ist ziemlich einfach:

Schließlich haben wir den Mut von div#cal-frame; schau es dir an, und dann besprechen wir es:


Voller Screencast

 

Was haben wir hier? Grundsätzlich erstellen wir das Kalenderraster mit einer Tabelle (Später fügen wir den aktuellen Monat dynamisch ein). Die entsprechenden Zellen haben die Datumsnummern; Wenn die Zellen leer sind, haben sie die Klasse "nil"; schließlich hat das heutige Datum die Klasse "heute".

Und wirklich, das ist der Umfang des HTML; Es gibt nicht viel zu sehen, aber hier ist was wir haben:



Schritt 2. Das CSS

Fangen wir mit einer Umgebung an:

Ziemlich offensichtlich, oder? Nach dem Festlegen einer Hintergrundfarbe zentrieren wir das Kalender-Widget horizontal und geben ihm einen Box-Schatten. Natürlich haben wir die Schriftart festgelegt. Aber warum stellen wir die Anzeige auf den Tisch? Standardmäßig wird ein div im Block angezeigt, was bedeutet, dass es die gesamte verfügbare Breite einnimmt; Indem es als Tabelle angezeigt wird, nimmt es die kleinste Breite ein, die es kann (während es immer noch seine untergeordneten Elemente enthält) und immer noch ein Blockelement ist.

Als nächstes konzentrieren wir uns auf die Kopfleiste:

Hier ist der erste Teil des Header-Stylings; Wir beginnen damit, den Cursor auf einen Zeiger zu setzen; So erscheint der Text nicht wählbar. Dann werden wir eine rote Hintergrundfarbe einstellen; Wenn der Browser dies jedoch unterstützt, verwenden wir einen Hintergrund-Farbverlauf: Vergessen Sie nicht, ihn für Mozilla und Webkit hinzuzufügen! Stellen Sie dann die Höhe auf 34px; wir werden die Position relativieren, weil die Kinder absolut positioniert sind; Indem Sie das Elternelement relativ positionieren, werden die Kinder absolut gegen den Elternteil positioniert, anstelle des Körpers. Setzen Sie die Textfarbe auf weiß, runden Sie die obere linke und rechte Ecke ab, und stellen Sie die Schriftart fett dar. Geben Sie dann einen leichten Textschatten, damit der Text eingerückt aussieht. Transformiere den Text schließlich in Großbuchstaben.

Jedes der Elemente in der Kopfzeile ist eine span; Jeder von diesen wird als Inline-Block angezeigt. Gib ihnen auch eine Zeilenhöhe von 34px (die Höhe des Headers).

Diese Bereiche haben auch einige spezielle Klassen, also schauen wir uns diese an:

Firstly, we have the "hook" class; remember, these are the hooks, or bindings, of the calendar. Wir werden die Breite und Höhe einstellen. Dann positioniere es absolut. Dann werden wir es von den unteren 60% nach oben bewegen. Wir werden um die Ecke genug, um die Bindungen rund aussehen zu lassen. Dann legen wir eine Hintergrundfarbe fest; Wenn der Browser Gradienten unterstützt, überschreiben wir den durchgehenden Hintergrund mit einem Farbverlauf. Dann geben wir ihnen einen Boxschatten.

Wir verwenden dann die Positionsklassen, um die Haken horizontal zu positionieren. Wenn das Element sowohl die "hook" als auch die "right" Klasse hat, verschiebe es 15% von rechts; Wenn es die "linke" Klasse hat, verschiebe es um 15% von links.

Jetzt haben wir die Monatsschaltflächen:

Wir werden die Breite dieser Schaltflächen festlegen und den Text zentrieren. natürlich müssen wir sie auch absolut positionieren. Für den linken Knopf bewegen wir ihn dann ganz nach links und links oben nach links. Für den rechten Knopf geht es nach rechts und rundet die obere rechte Ecke ab.

Schließlich fügen wir einen Hover-Effekt für die Schaltflächen hinzu. Natürlich werden wir einen Farbverlauf verwenden.

Es gibt noch ein weiteres Element zu gestalten: das ist das Monatslabel.

Wir verwenden den letter-spacing, um den Charakteren ein wenig mehr Platz zum Atmen zu geben. Dann geben wir dem Bereich eine Breite von 100% und zentrieren den Text. Da alle Geschwisterelemente absolut positioniert sind, entspricht das der vollen Breite, was wir wollen.

Das ist also der ganze Header! Ich sollte erwähnen, dass, obwohl wir die meisten Elemente absolut positioniert haben, weil wir Prozentsätze verwenden, um sie zu positionieren, alles perfekt skaliert, wenn Sie die Schriftgröße im Browser erhöhen oder verringern.

Alles klar, gehen wir zu den Tag-Headern.

Wir beginnen mit zwei etwas generischeren Selektoren: der Tagheader und das Kalenderraster sind beide Tabellen, also gilt die erste Regel für beide: Wir setzen den Hintergrund auf Weiß und reduzieren die Grenzen. Wenn Tabellenrahmen ausgeblendet sind, haben sie keinen Abstand zwischen ihnen und benachbarte Zellen teilen Rahmen. Dann geben wir ihnen für alle Tabellenzellen eine Textfarbe, stellen ihre Breite, Höhe und Zeilenhöhe auf 30 Pixel ein und zentrieren den Text. Sie alle erhalten einen Rahmen und den Standardcursor (einen Pfeil / Zeiger);

Dann fügen wir ein spezielles Styling für die Tabellenzellen in der Days-Tabelle hinzu: Wir reduzieren ihre Höhe und Zeilenhöhe etwas, stellen sicher, dass sie Großbuchstaben sind und setzen die Schriftgröße und Textfarbe zurück. (Hinweis: Im begleitenden Screencast habe ich #day statt #days in den Selektor für den dritten Block oben geschrieben und ihn nie korrigiert; stelle sicher, dass du es richtig machst!)

Wofür ist die letzte Regel? Nun, im Moment gibt es hellgraue Ränder an den Tag-Namen-Zellen. Wir wollen die Farbe der Ränder rechts auf weiß ändern, damit sie nicht sichtbar sind. Das wollen wir jedoch nicht bis zur letzten Zelle in der Reihe tun. Also können wir zwei Pseudo-Klassen verwenden. :not wird einen Ausschluss-Selektor "Parameter" nehmen. :last-child packt das letzte Kind der Elemente, die wir bereits ausgewählt haben: In diesem Fall sind das die Tabellenzellen. Dann setzen wir einfach die richtige Grenze auf einfarbig weiß.

Diese beiden Regeln sind auf das Kalenderraster ausgerichtet. Für die Tabellenzelle mit der Klasse "heute" setzen wir den Hintergrund hellgrau und den Text dunkler. Als nächstes setzen wir einen Box-Schatten: Es ist ein weißer Schatten, aber wir verwenden keine Unschärfe, also ist es eine weiße Linie; Wir schieben es nach oben und nach rechts um ein Pixel, so dass wir einen sekundären Randeffekt erhalten. Beachten Sie, dass wir der Box-Shadow-Deklaration "Inset" hinzufügen, sodass der Schatten innerhalb der Zelle liegt.

Die nächste Regel wendet einen Hover-Effekt auf alle Tabellenzellen im Kalenderraster an, mit Ausnahme der mit der Klasse "nil"; Wir setzen den Text auf weiß und fügen einen Schatten hinzu. Dann ändern wir den Hintergrund in Rot, indem wir einen Gradienten verwenden, wenn wir können. Wir beziehen die Schachtelschattenentfernung speziell für die Zelle "Heute" ein.

Es gibt einen speziellen Fall, den wir noch nicht erwähnt haben; Nimm dir deinen nächsten Kalender - nein, nicht iCal, ich rede von einem echten Papierkalender - und sieh dir an, oh, sagen wir, Oktober 2010. Sie werden bemerken, dass es in der letzten Woche eine verdoppelte Zelle gibt, mit sowohl dem 24 als auch dem 31 auf dem gleichen Platz. Das müssen wir tun, also lasst uns dafür stilisieren.

Die Art, wie wir das markieren, besteht darin, jedes Datum in einen Bereich innerhalb der Tabellenzelle zu setzen.

Zuerst positionieren wir die Spannen relativ und verkleinern ihre Schrift nur um ein Haar; Dann bewegen wir die erste um 5 px und die zweite um 5 px.

Wir werden noch etwas tun; wenn wir zwischen Monaten wechseln, wollen wir von einem zum anderen verblassen; Dies erfordert, dass die zwei Tabellen übereinander liegen. Das können wir damit erreichen:

Der, den wir ausbleichen, wird eine Klasse von "temp" haben; der neue, den wir bringen, um (für eine Weile) zu bleiben, wird die Klasse "curr" haben.

Und das war's für das CSS! Kommen wir nun zu einigen Funktionen.


Schritt 3. Das JavaScript

Wir machen die Funktionalität für unseren Kalender einfach wiederverwendbar. Angesichts dessen beginnen wir mit diesem Skelett:

Also erstellen wir drei Funktionen innerhalb unserer CALENDAR-Funktion; Das eine wird das Kalender-Widget initialisieren, das zweite wird sich zwischen den Monaten bewegen und das dritte wird das Kalenderraster erstellen. bemerke die Zeile danach: createCal.cache = {}; Das besprechen wir auch!

Wir haben oben auch drei Variablen erstellt: Wir geben wrap und label-Werte innerhalb von init an, aber monates ist ein Array mit den Namen der Monate.

Hier ist der Inhalt unserer init-Funktion:

Wir beginnen mit der Angabe von wrap und label die entsprechenden Werte: Beachten Sie, dass wir den an init übergebenen Selektor verwenden, um wrap zu finden, aber auf "#cal" zurückfallen, wenn einer nicht angegeben wird. Dann binden wir Klickereignisse an die nächsten und vorherigen Kalenderschaltflächen. diese rufen die Funktion switchMonth auf; wenn wir den nächsten Kalender haben wollen, gehen wir wahr durch, sonst gehen wir falsch durch.

switchMonth kann jedoch auch zwei weitere Parameter übernehmen. Wir verwenden diese für das Klickereignis auf dem Etikett. Wenn der Nutzer auf den Monatsnamen klickt, wechseln wir zum aktuellen Monat. Wir geben also den aktuellen Monat und das aktuelle Jahr an, die wir vom JavaScript Date-Objekt erhalten. Vergessen Sie nicht, den nächsten Parameter auf null zu setzen!

Noch eine Sache (und ein Bonustipp, der nicht im Screencast ist!): Wenn der Benutzer die Seite lädt, möchten wir den korrekten Monat über den Monat laden, der fest codiert ist. Der einfachste Weg, dies zu tun, besteht darin, die jQuery-click-Methode auf dem Label ohne Parameter aufzurufen. Dies simuliert einen Mausklick und bringt den Kalender auf den aktuellen Monat.

Kommen wir zur switchMonth-Funktion:

Wir werden ein paar Variablen an der Spitze setzen; Wir teilen das Label in ein Array namens curr auf; Wir erstellen auch eine calendar variable und greifen das Kalenderjahr, das gerade angezeigt wird.

Dann werden die Dinge kompliziert. Ich habe hier JavaScript-Bedingungsoperatoren verwendet, sodass ich alles auf eine Zeile setzen kann. Anstatt zu versuchen, es zu erklären, überprüfen Sie dies: das ist, was sie tun:

Sie können sehen, warum der bedingte Operator attraktiv ist: Es ist nur eine Zeile. Hier ist die erweiterte Version der Jahresvariable:

Am Ende sind month und year die korrekten Werte für den Kalender, den wir dem Benutzer zeigen möchten. Wenn Sie sich wohler fühlen, können Sie diese beiden Zeilen durch die obigen Ausschnitte ersetzen.

Als nächstes erstellen wir den Kalender und passen das DOM entsprechend an:

Was ist in dem Kalenderobjekt, das von der CreateCal-Funktion zurückgegeben wird? Es ist ein Objekt, so:

Wir besprechen, warum die Kalendereigenschaft eine Methode ist, wenn wir sie erstellen. Lassen Sie uns vorerst auf die Seite zurückkehren. Wir erhalten den Kalenderrahmen und finden den aktuell angezeigten Kalender. Dann entfernen wir die Klasse "curr" und wenden die Klasse "temp" an; dann setzen wir den neuen Kalender ein (der übrigens mit der Klasse "curr" kommt) und verblassen und entfernen den alten.

Nun, wir haben nur noch eine weitere Funktion: createCal.

Hier ist unser Anfang: die Variablen. Wir haben day, setzen auf 1; Wir haben zwei Variablen für die Iteration: i und j. Dann finden wir heraus, an welchem Wochentag der Monat beginnt. Wir können dies tun, indem wir ein Date-Objekt für den ersten Tag des Monats erstellen und getDay aufrufen.

Als Nächstes erstellen wir ein Array, das die Anzahl der Tage in jedem Monat enthält. Für Februar müssen wir Schaltjahre berücksichtigen, also verwenden Sie einen anderen ternären Ausdruck, um das zu berechnen.

Schließlich haben wir die sehr wichtige calendar variable, die ein Array ist.

Als nächstes wollen wir die cache-Eigenschaft verwenden, die wir der Funktion createCal zuweisen. (Da alles in JavaScript ein Objekt ist, können sogar Funktionen Eigenschaften haben.)

Hier ist, was passiert: Es gibt eine Möglichkeit, dass der Benutzer den gleichen Monat mehr als einmal "anfordert". Sobald wir es zum ersten Mal erstellt haben, müssen wir es nicht noch einmal machen. Wir werden es in den Cache legen und später herausziehen.

Wenn dieses cache-Objekt eine Eigenschaft mit dem Namen des Jahres hat, nach dem wir suchen, können wir nach der Verfügbarkeit des Monats suchen; Wenn wir den Monat bereits erstellt haben, geben wir das zwischengespeicherte Objekt zurück. Wenn es keine Immobilie für das Jahr gibt, werden wir es schaffen, denn wir müssen den Monat, den wir gerade erstellen, in den Kalender einfügen.

Wenn wir diesen Punkt bestehen, müssen wir mit dem Erstellen des Kalenders für den angeforderten Monat beginnen.

Dies ist ein kompliziertes Bit; Während die haveDays-Variable wahr ist, wissen wir, dass wir noch Tage im Monat haben. Daher verwenden wir unseren i Iterator, um dem Kalender-Array ein Wochen-Array hinzuzufügen. Dann verwenden wir eine For-Schleife auf dem j Iterator, während sie kleiner als 7 ist; Da wir mit 0 beginnen, erhalten wir 7 Tage für das Array außerhalb der Woche. In unserer for-Schleife gibt es drei Fälle.

Zuerst müssen wir überprüfen, ob wir in der ersten Woche des Monats sind; Wenn wir es sind, werden wir nicht unbedingt am ersten Tag anfangen. Wir wissen bereits, an welchem Tag der Monat beginnt. Das ist in unserer startDay Variable startDay. Wenn also j === startDay ist, haben wir den richtigen Tag, um zu beginnen, also setzen wir den Wert des day in den richtigen Slot. Dann erhöhen wir day und startDay um eins. Beim nächsten Mal werden die for-Schleife, j und startDay gleich sein, so dass es für den Rest der Woche weiter funktioniert.

Wenn wir nicht in der ersten Woche sind (i! == 0), stellen wir sicher, dass noch Tage übrig sind, um sie dem Kalender hinzuzufügen. Wenn ja, stellen wir sie ein. Schließlich, wenn wir nicht in der ersten Woche sind und wir keine Tage mehr haben, um zu dem Monat hinzuzufügen, werden wir stattdessen eine leere Zeichenfolge einfügen. Dann setzen wir haveDays auf false.

Am Ende überprüfen wir, ob der day größer ist als die Anzahl der Tage im Monat. Wenn ja, setzen wir haveDays auf false. Dies ist für den speziellen Fall, wo der Monat an einem Samstag endet.

Vergesse natürlich nicht, dass ich direkt außerhalb der For-Schleife i inkrementiere!

Wir möchten nicht, dass unser Kalender mehr als 5 Wochen hat; Wenn ein oder zwei Tage in die 6. Woche fallen, teilen wir die Zellen in Woche 5 auf, wie wir es in unserem CSS vorbereitet haben. Also, wenn es ein sechstes Array innerhalb des Kalender-Arrays gibt, werden wir es durchlaufen. Wenn der Inhalt des Array-Elements keine leere Zeichenfolge ist, weisen wir den Wert der Zelle direkt über Zeile 6 zu: Wir werden diesen Wert in einen Bereich einschließen und einen anderen Bereich mit dem entsprechenden Zeilenwert verketten 6 innen. Das macht Sinn, oder?

Sobald wir alle an Ort und Stelle sind, schneiden wir das letzte Element aus dem calendar.

Jetzt ist es Zeit, jede Woche in unserem calendar zu verketten; Wir werden jede Schleife in einer For-Schleife durchlaufen und die Einträge in Tabellenzeilen umwandeln, wobei jeder Tag in einer Tabellenzelle liegt. Dann verwandeln wir das Ganze in ein jQuery-Objekt, nachdem alle Tabellenzeilen zusammengefügt und mit einer Tabelle umschlossen wurden. Wir fügen dann die Klasse "curr" zu dieser Tabelle hinzu.

Alle leeren Tabellenzellen (wir können den jQuery-Pseudo-Selektor verwenden: leer, um sie zu finden), erhalten die Klasse "nil".

Wenn wir einen Kalender für den aktuellen Monat erstellen, finden wir die Zelle für heute und geben ihr die Klasse "heute"; Wir können es finden, indem wir eine Funktion an die jQuery-Filtermethode übergeben. Die Funktion gibt true zurück, wenn der Text der Zelle mit dem Datum übereinstimmt.

Schließlich erstellen wir unser fertiges Objekt und legen es in den Cache. Warum machen wir die calendar eigenschaft zu einer Funktion? Nun, wenn wir gerade ein jQuery-Objekt zurückgegeben haben, nachdem wir es zum Kalender hinzugefügt und dann zu einem anderen Monat gewechselt haben, wird die Tabelle aus dem DOM entfernt. Später, wenn wir zu diesem Monat zurückkehren, wird das Element nicht angezeigt, da der Cache auf dasselbe DOM-Element verweist. Daher verwenden wir die jQuery-Klonmethode, um eine Kopie des DOM-Elements zurückzugeben. Dann erhält die Bezeichnung den Monatsnamen aus dem Monat-Array und verkettet diesen mit dem Jahr. Schließlich geben wir das Objekt zurück.

Wir sind fertig! Zurück in der Datei index.html fügen wir ein Skript-Tag hinzu:

Das ist es! So sieht unser fertiges Produkt aus!


Aber ich kann dir die Funktionalität nicht zeigen; Sie müssen den Code selbst auschecken! Danke fürs Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.