So erstellen Sie einen monatlichen Kalender mit echten Daten

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!