Einführung
Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: einen Monatskalender. Dieses Projekt ist perfekt für alle, die einen funktionalen und optisch ansprechenden Kalender in JavaScript erstellen möchten. Egal, ob Sie daran interessiert sind, einer Website eine Kalenderfunktion hinzuzufügen oder einfach nur Ihre JavaScript-Kenntnisse verbessern möchten, dieses Projekt wird eine wertvolle Ergänzung Ihres Portfolios sein.
Projektübersicht
Der Monatskalender ist eine webbasierte Anwendung, die den aktuellen Monat anzeigt, das heutige Datum hervorhebt und die Wochentage genau anordnet. Das Projekt zeigt, wie man mithilfe von JavaScript dynamisch einen Kalender generiert, kombiniert mit einer schlanken und reaktionsfähigen Oberfläche, die mit HTML und CSS erstellt wurde.
Merkmale
-
Dynamische Monatsanzeige: Zeigt automatisch den aktuellen Monat und das aktuelle Jahr an.
-
Hervorgehobenes aktuelles Datum: Das heutige Datum ist zur leichteren Identifizierung hervorgehoben.
-
Genaues Tageslayout: Die Wochentage werden entsprechend dem Monat korrekt ausgerichtet.
Verwendete Technologien
-
HTML: Stellt die Struktur für den Monatskalender bereit.
-
CSS: Gestaltet den Kalender und stellt sicher, dass er optisch ansprechend und reaktionsfähig ist.
-
JavaScript: Verwaltet die Logik zum Generieren des Kalenders, einschließlich der Berechnung der Tage und der Hervorhebung des aktuellen Datums.
Projektstruktur
Hier ein Überblick über die Projektstruktur:
Month-Calendar/
├── index.html
├── style.css
└── script.js
Nach dem Login kopieren
-
index.html: Enthält die HTML-Struktur für den Monatskalender.
-
style.css: Enthält CSS-Stile, um ein modernes und ansprechendes Design zu erstellen.
-
script.js: Verwaltet die Kalendergenerierungsfunktion.
Installation
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
-
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Month-Calendar.git
Nach dem Login kopieren
-
Öffnen Sie das Projektverzeichnis:
cd Month-Calendar
Nach dem Login kopieren
-
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um den Monatskalender anzuzeigen.
Verwendung
-
Öffnen Sie die Website in einem Webbrowser.
-
Den aktuellen Monat anzeigenmit hervorgehobenem heutigen Datum.
-
Navigieren Sie durch die Tage, um das Layout für den gesamten Monat anzuzeigen.
Code-Erklärung
HTML
Die Datei index.html definiert die Struktur des Monatskalenders, einschließlich der Monatsanzeige und des Rasterlayouts für die Tage. Hier ist ein Ausschnitt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Month Calendar</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Month Calendar</h1>
</div>
<div class="calendar">
<div class="month">
<div class="date">
<h1></h1>
<p></p>
</div>
</div>
<div class="weekdays">
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
<div>Sun</div>
</div>
<div class="days"></div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</div>
</body>
</html>
Nach dem Login kopieren
CSS
Die style.css-Datei gestaltet den Monatskalender und macht ihn sowohl attraktiv als auch reaktionsfähig. Nachfolgend sind einige wichtige Stile aufgeführt:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
background-color: salmon;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.header {
margin: 20px;
color: white;
text-align: center;
}
.calendar {
background-color: black;
color: lightgray;
width: 450px;
height: 520px;
border-radius: 10px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}
.month {
width: 100%;
height: 120px;
background-color: lightseagreen;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 10px 10px 0 0;
}
.month h1 {
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
}
.month p {
font-size: 16px;
}
.weekdays {
width: 100%;
height: 50px;
display: flex;
}
.weekdays div {
font-size: 15px;
font-weight: bold;
letter-spacing: 1px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.days {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 2px;
}
.days div {
font-size: 14px;
margin: 3px;
width: 57.5px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.days div:hover:not(.empty) {
border: 2px solid gray;
cursor: pointer;
}
.today {
background-color: lightseagreen;
}
.footer {
margin-top: 70px;
color: white;
text-align: center;
}
Nach dem Login kopieren
JavaScript
Die Datei script.js enthält die Logik zum Generieren des Kalenders und zum Hervorheben des aktuellen Datums. Hier ist ein Ausschnitt:
const monthEl = document.querySelector(".date h1");
const fullDateEl = document.querySelector(".date p");
const daysEl = document.querySelector(".days");
const monthInx = new Date().getMonth();
const lastDay = new Date(new Date().getFullYear(), monthInx + 1, 0).getDate();
const firstDay = new Date(new Date().getFullYear(), monthInx, 1).getDay() - 1;
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
monthEl.innerText = months[monthInx];
fullDateEl.innerText = new Date().toDateString();
let days = "";
for (let i = firstDay; i > 0; i--) {
days += `<div class="empty"></div>`;
}
for (let i = 1; i <= lastDay; i++) {
if (i === new Date().getDate()) {
days += `<div class="today">${i}</div>`;
} else {
days += `<div>${i}</div>`;
}
}
daysEl.innerHTML = days;
Nach dem Login kopieren
Live-Demo
Sie können sich hier die Live-Demo des Monatskalenderprojekts ansehen.
Abschluss
Die Erstellung des Monatskalenders war ein unterhaltsames Projekt, das es mir ermöglichte, meine Frontend-Entwicklungsfähigkeiten mit praktischen JavaScript-Funktionen zu kombinieren. Dieses Tool eignet sich zum Anzeigen von Kalenderdaten auf Websites und kann eine großartige Ergänzung für Ihre Webentwicklungsprojekte sein. Ich hoffe, Sie finden es genauso hilfreich wie ich. Viel Spaß beim Codieren!
Credits
Dieses Projekt wurde als Teil meiner Reise entwickelt, um meine JavaScript-Kenntnisse zu verbessern und funktionale Web-Tools zu erstellen.
Autor
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Monatskalender-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
