Haben Sie jemals einen Kalender auf einer Webseite gesehen und sich selbst gedacht: "Wie haben sie das gemacht?" Es ist natürlich, Plugins oder sogar eingebettete Google -Kalender für solche Dinge zu verwenden, aber tats?chlich ist es viel einfacher, einen Kalender zu machen, als Sie denken, nur drei Musketiere von HTML, CSS und JavaScript. Lass uns einen zusammen machen!

Ich habe eine Demo auf Codesandbox eingerichtet, in der Sie unser Ziel sehen k?nnen.

Schauen Sie sich zun?chst die Demo an. Lassen Sie uns einige der Anforderungen für den Kalender festlegen. es sollte:

• Zeigt das Monatsraster für den angegebenen Monat an
• Zeigt Daten für den Vormonat und den n?chsten Monat, damit das Netz immer abgeschlossen ist
• Zeigt das aktuelle Datum an
• Zeigen Sie den Namen des aktuell ausgew?hlten Monat
• Navigieren Sie zum Vormonat und im n?chsten Monat
• Erm?glichen

Oh, und wir werden es als einzelne Seitenanwendung erstellen, um Kalenderdaten von Day.js (eine superleichte Versorgungsbibliothek) zu erhalten.

Um den Vorgang zu vereinfachen, werden wir es vermeiden, bestimmte Frameworks auszuw?hlen. Für dieses Setup verwende ich Parcel für die Paketverwaltung, damit ich Babel zum Schreiben von Code, dem Bündelcode und zur Verwaltung der einzigen Abh?ngigkeit im Projekt verwenden kann. Weitere Informationen finden Sie in der Datei Package.json in CodesAndbox.

Schritt 1: Beginnen Sie mit grundlegenden Tags und Stilen

Beginnen wir mit dem Erstellen einer grundlegenden Vorlage für Ihren Kalender. Dies erfordert nichts Besonderes. Es sollte aber auch ohne das Formular geschehen.

Wir k?nnen unser Markup als drei Ebenen skizzieren, die enth?lt:

• Kalendertitelabschnitt. Dadurch wird der aktuell ausgew?hlte Monat und die für die Paginierung zwischen den Monaten verantwortlichen Elementen angezeigt.
• Kalendergitter -Titelabschnitt. Auch hier verwenden wir keine Tabellen, aber es ist wie ein Kopfball, der eine Liste der Wochentage enth?lt.
• Kalenderraster. Sie wissen, jeder Tag des aktuellen Monats wird durch ein Quadrat im Netz dargestellt.

Schreiben wir dies in einer Datei namens Index.js. Dies kann im SRC -Ordner im Projektordner platziert werden. Wir haben eine Index.html -Datei im Projektroot -Verzeichnis, um unsere Arbeiten zu importieren, aber das Haupt -Tag wird in der JavaScript -Datei enthalten.

 document.getElementById ("App"). Innerhtml = `
<div>
  <div>
    Juli 2020
  </div>

  <div>
    Heute
    >
  </div>

  <ol>
    <li>Mon</li>
    ...
    <li>Sonne</li>
  </ol>

  <ol>
    <li>
      1
      ...
      29
    </li>
  </ol>
</div>
`;

Lassen Sie uns diese Datei in die in der Stammverzeichnis des Projekts befindliche Datei in die Index.html -Datei importieren. Hier ist nichts Besonderes passiert. Es handelt sich nur um eine HTML -Kesselplatte, die ein Element enth?lt, das sich von unserer Anwendung befindet und in unserer Index.js -Datei registriert ist.

 

  
    <meta charset="UTF-8">
    <title>Paket Sandkasten</title>
  
  
    <div id="app"></div>
    <script src="./src/index.js"></script>
  

Jetzt, da wir einige Marker verwenden müssen, lassen Sie uns ein wenig gestylen, damit wir als Start ein gutes Bild haben. Insbesondere werden wir:

• Positionierung von Elementen mit Flexbox
• Erstellen Sie einen Kalenderrahmen mit CSS Grid
• Positionsbezeichnungen in Zellen

Erstellen wir zun?chst eine neue styles.css -Datei im selben SRC -Ordner wie index.js und setzen Sie sie in sie ein:

 / * ... (CSS -Code ist der gleiche wie oben) ... */

Der wichtigste Teil beim Einrichten eines Gitters ist:

 .
tays-Grid {
  / * 7 Gleiche Spalten für Wochentage und Tage Zellen */
  Anzeige: Grid;
  Grid-Template-S?ulen: Wiederholung (7, 1fr);
}

Beachten Sie, dass sowohl der Kalenderrastertitel als auch das Kalenderraster selbst mit einem CSS -Netz angelegt werden. Wir wissen, dass es immer sieben Tage in der Woche gibt. Dadurch k?nnen wir sieben Spalten erstellen, die unter Verwendung der Funktion repep () proportional zueinander sind. Wir haben auch an jedem Kalenderdatum eine min-H?he von 100px deklariert, um sicherzustellen, dass die Zeilen konsistent sind.

Wir müssen diese Stile mit den Tags verbinden. Fügen wir sie also an die Spitze der Index.js -Datei hinzu:

 import "./styles.css";

Dies ist ein guter Stopppunkt, um zu sehen, was wir bisher haben.

Sehen Sie sich die Demo ### Schritt 2 an: Legen Sie den aktuellen Monatskalender fest

M?glicherweise haben Sie festgestellt, dass die Vorlage derzeit nur statische Daten enth?lt. Der Monat ist im Juli festcodiert und die Datumsnummern sind ebenfalls festcodiert. Hier kommt Day.js ins Spiel. Es enth?lt alle Daten, die wir ben?tigen, um das Datum zum richtigen Datum der Woche mit realen Kalenderdaten korrekt einzusetzen. Es erm?glicht es uns, alles von einem Monat Startdatum bis zu allen Datumsformatoptionen einzustellen, die zur Anzeige der Daten erforderlich sind.

wir werden:

• Holen Sie sich den aktuellen Monat
• Berechnen Sie, wo das Datum platziert werden soll (Arbeitstag)
• Berechnen Sie Daten für die Anzeige im Vormonat und im n?chsten Monat
• Kombinieren Sie alle Daten zu einem Array

Zun?chst müssen wir Tag importieren und alle statischen HTML (ausgew?hlter Monat, Wochentag und Datum) l?schen. Wir werden dies tun, indem wir dies dem Importstil direkt über der Index.js -Datei hinzufügen:

 Tagjs von "Dayjs" importieren;

Wir werden uns auch auf den Tag verlassen. Js Plugin, um Hilfe zu erhalten. Wochentag hilft uns, den ersten Wochentag festzulegen. Einige Leute machen am ersten Tag der Woche am Sonntag. Andere bevorzugen Montag. In einigen F?llen ist es ab Freitag sinnvoll. Wir werden am Montag beginnen.

Das Weekofyear -Plugin gibt den numerischen Wert der aktuellen Woche des Jahres zurück. Es gibt 52 Wochen im Jahr, also k?nnen wir sagen, dass die Woche am 1. Januar die erste Woche des Jahres ist und so weiter.

Hier ist also, was wir zu Index.js nach der Import -Anweisung hinzufügen:

 const wochentag = verlangt ("Dayjs/Plugin/Wochentag");
const weekofyear = fordert ("Dayjs/Plugin/Weekofyear");

DayJS.Extend (Wochentag);
DayJS.Extend (Weekofyear);

Sobald wir die hartcodierten Kalenderwerte entzogen haben, haben wir dies bisher in Index.js:

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Lassen Sie uns nun einige Konstanten setzen. Insbesondere m?chten wir eine Reihe von Wochentagen (d. H. Montag, Dienstag, Mittwoch usw.) errichten:

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Dann wollen wir das laufende Jahr bekommen und es in Yyyy -Format einstellen:

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Wir m?chten den aktuellen Monat als Ausgangspunkt beim Laden des Kalenders festlegen, in dem M den Monat als numerischer Wert formatiert (z. B. Januar entspricht 1):

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Lassen Sie uns mit den Wochentagen weiterhin unsere Kalenderrastertitel füllen. Erstens erhalten wir das richtige Element (#Woche der Woche), dann schauen wir das Wochentagen durch, erstellen ein Listenelementelement für jedes Element im Array und setzen den Namen jedes Elements:

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Schritt 3: Erstellen Sie ein Kalenderraster

Es ist sehr einfach, aber jetzt beginnt der wahre Spa?, weil wir jetzt das Kalenderraster verwenden werden. Lassen Sie uns innehalten und darüber nachdenken, was wir wirklich tun müssen, um dies richtig zu tun.

Erstens m?chten wir, dass die Datumsnummern in die richtige Spalte am Arbeitstag fallen. Zum Beispiel ist der 1. Juli 2020 Mittwoch. Hier sollte die Datumsnummer beginnen.

Wenn der erste Tag eines Monats Mittwoch ist, bedeutet dies, dass am Montag und Dienstag der ersten Woche Gitterartikel verfügbar sein werden. Der letzte Tag des Monats ist der 31. Juli, Freitag. Dies bedeutet, dass Samstag und Sonntag der letzten Woche leer sein werden. Wir m?chten diese Daten mit nachlaufenden Daten und führenden Daten für den Vormonat und den n?chsten Monat bev?lkern, damit das Kalenderraster immer abgeschlossen ist.

Erstellen Sie das Datum des aktuellen Monats

Um das Datum des aktuellen Monats in das Netz hinzuzufügen, müssen wir wissen, wie viele Tage es im aktuellen Monat gibt. Wir k?nnen die Daysinmonth -Methode verwenden, die von Tags.js bereitgestellt wird, um sie zu erhalten. Erstellen wir dafür eine Helfermethode.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Wenn wir dies wissen, erstellen wir ein leeres Array von L?nge, der der Anzahl der Tage im aktuellen Monat entspricht. Wir mart () das Array und erstellen für jedes Array ein Datumsobjekt. Die von uns erstellten Objekte haben eine beliebige Struktur, sodass Sie zus?tzliche Eigenschaften hinzufügen k?nnen, wenn Sie m?chten.

In diesem Beispiel ben?tigen wir eine Datumseigenschaft, mit der prüft, ob ein bestimmtes Datum das aktuelle Datum ist. Wir werden auch ein Dayofmonth -Eigentum zurückgeben, das als Etikett fungiert (z. B. 1, 2, 3 usw.). Iscurrentmonth prüft, ob das Datum innerhalb oder au?erhalb des aktuellen Monats liegt. Wenn es au?erhalb des aktuellen Monats liegt, werden wir es stylen, damit die Leute wissen, dass sie au?erhalb des aktuellen Monats liegen.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Fügen Sie das Datum des Vormonats dem Kalenderraster hinzu

Um das Datum des Vormonats im laufenden Monat zu erhalten, müssen wir überprüfen, welcher Wochentag am ersten Tag des ausgew?hlten Monats ist. Hier k?nnen wir das Wochentags -Plugin für Day.js. Erstellen wir dafür eine Helfermethode.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Auf dieser Grundlage müssen wir dann überprüfen, welcher Tag am letzten Montag des Vormonats war. Wir brauchen diesen Wert, um zu wissen, wie viele Tage des Vormonats in der aktuellen Monatsansicht angezeigt werden sollen. Wir k?nnen es bekommen, indem wir den Wert des Arbeitstages ab dem ersten Tag des aktuellen Monats subtrahieren. Wenn zum Beispiel der erste Tag eines Monats Mittwoch ist, müssen wir 3 Tage abziehen, um den letzten Montag des Vormonats zu erhalten. Mit diesem Wert k?nnen wir ab dem letzten Montag des Vormonats und bis zum letzten Tag dieses Monats eine Reihe von Datumsobjekten erstellen.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Fügen Sie das Datum des n?chsten Monats dem Kalenderraster hinzu

Wenden wir uns nun um, um zu berechnen, welche Daten wir aus dem n?chsten Monat erhalten müssen, um das Netz des aktuellen Monats zu füllen. Glücklicherweise k?nnen wir dieselbe Helfermethode verwenden, die wir gerade für die Berechnungen des Vormonats erstellt haben. Der Unterschied besteht darin, dass wir berechnen werden, wie viele Tage im n?chsten Monat angezeigt werden sollen, indem dieser Arbeitstag von 7 abgezogen wird.

Wenn der letzte Tag eines Monats beispielsweise Samstag ist, müssen wir einen Tag von 7 abziehen, um das erforderliche Datum -Array ab dem n?chsten Monat (Sonntag) zu errichten.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

OK, wir wissen, wie man alle erforderlichen Tage erstellt. Lassen Sie uns die gerade erstellte Methode verwenden, und fusionieren Sie dann alle Tage in ein einzelnes Array mit allen Tagen, die wir im aktuellen Monat anzeigen m?chten, einschlie?lich der Polsterdaten für den Vormonat und den n?chsten Monat.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Hier ist alles, was wir in Index.js zusammenstellen:

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Demo ### Schritt 4 anzeigen: Kalenderdatum anzeigen

OK, wir haben also die grundlegenden Markierungen für den Kalender. Wir müssen Daten für den aktuellen Monat des Monats sowie die Daten des Vormonats und im n?chsten Monat anzeigen, um die leeren Rasterelemente auszufüllen. Jetzt müssen wir das Datum dem Kalender anh?ngen!

Wir haben bereits einen Container für ein Kalenderraster #Kalendertage. Lassen Sie uns das Element bekommen.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Lassen Sie uns nun eine Funktion erstellen, die Daten an die Kalenderansicht anh?lt.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Beachten Sie, dass wir Daten aus dem Vormonat und im n?chsten Monat überprüfen, damit wir eine Klasse hinzufügen k?nnen, um sie von den Daten des aktuellen Monats zu unterscheiden:

 // ... (CSS -Code ist der gleiche wie oben) ...

Das war's! Unser Kalender sollte jetzt so angezeigt werden, wie wir es wollen.

DEMO ### Schritt 5 anzeigen: W?hlen Sie den aktuellen Monat aus

Was wir bisher bisher haben, ist ziemlich gut, aber wir m?chten, dass Benutzer den Monat vorw?rts und rückw?rts sehen k?nnen, beginnend mit dem aktuellen Monat. Wir haben bereits den gr??ten Teil der Logik. Wir müssen also wirklich einen Klick -Listener zur Paging -Schaltfl?che hinzufügen, mit der die Datumsberechnung umgeleitet wird und den Kalender mit aktualisierten Daten neu streift.

Bevor wir beginnen, definieren wir die Datumsvariablen für den aktuellen Monat, den Vormonat und den n?chsten Monat, damit wir sie im gesamten Code verweisen k?nnen.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Lassen Sie uns nun eine Methode erstellen, die für die Neuberechnung des Kalenderdatums verantwortlich ist und den Kalender erneut auszurufen, wenn sie zu einem anderen Monat pagieren. Wir werden die Funktion CreateCalendar aufrufen. Diese Methode akzeptiert zwei Eigenschaften - einen Jahresmonat - und basierend darauf wird der Kalender mit neuen Daten erneut geführt, ohne die Seite neu zu laden.

Diese Methode ersetzt den Titelinhalt, um immer das ausgew?hlte Monatsetikett anzuzeigen.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Anschlie?end wird der Kalenderdatum Container erhalten und alle vorhandenen Daten l?scht.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Nach dem L?schen des Kalenders berechnet er das neue Datum, das mit der zuvor erstellten Methode angezeigt werden sollte.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Schlie?lich wird es jedem Tag ein Datumselement anh?ngen.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Es fehlt auch ein logisches Teil: eine methode removealldayelements, die einen vorhandenen Kalender l?scht. Diese Methode nimmt das erste Kalenderdatumelement an, l?scht es und ersetzt es durch ein anderes Element. Von dort aus werden die Logik geschoben, bis alle Elemente gel?scht werden.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Wenn wir jetzt den Monat ?ndern wollen, k?nnen wir diese Logik wiederverwenden. Erinnern Sie sich an den ersten Schritt, als wir eine statische Vorlage für die Komponente erstellt haben. Wir haben diese Elemente hinzugefügt:

 // ... (HTML -Code ist der gleiche wie oben) ...

Dies sind die Kontrollen für die Paginierung zwischen Monaten. Um es zu ?ndern, müssen wir den derzeit ausgew?hlten Monat speichern. Lassen Sie uns eine Variable erstellen, die nachverfolgt, was sie ist, und ihren Anfangswert auf diesen Monat festlegen.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Damit der Selektor funktioniert, ben?tigen wir jetzt ein JavaScript. Um das Lesen zu erleichtern, werden wir eine andere Methode namens Initmonthelectors erstellen und die Logik dort lassen. Diese Methode fügt dem Selektorelement einen Ereignish?rer hinzu. Es h?rt auf Klickereignisse zu und aktualisiert den Wert von SelectedMonth auf den Namen des neu ausgew?hlten Monats und führt dann die CreateCalendar -Methode mit den richtigen Jahres- und Monatswerten aus.

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Das war's! Unser Kalender ist fertig. Dies ist zwar gut, aber es w?re noch besser, wenn wir das aktuelle Datum markieren k?nnten, so dass es sich von den anderen abhebt. Das sollte nicht schwierig sein. Wir setzen bereits einen Datumsstil au?erhalb des aktuellen Monats fest, also lass uns etwas ?hnliches tun.

Wir werden heute eine Variable erstellen:

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Wenn wir dann in der Methode der Appendday eine Klasse mit einem Datum au?erhalb des aktuellen Monats anwenden, müssen wir dann einen weiteren Scheck hinzufügen, um festzustellen, ob das Element das heutige Datum ist. Wenn ja, werden wir dem Element eine Klasse hinzufügen:

 // ... (JavaScript -Code ist der gleiche wie oben) ...

Jetzt k?nnen wir den Stil festlegen!

 // ... (CSS -Code ist der gleiche wie oben) ...

Schau, wir sind fertig! Schauen Sie sich die letzte Demo an, um eine Kombination aus allem zu sehen.

Sehen Sie sich die Demo an

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen monatlichen Kalender mit echten Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!