Créer un site Web de calendrier mensuel-tutoriel CSS-php.cn

Créer un site Web de calendrier mensuel

王林

Libérer： 2024-08-27 18:01:18

original

607 Les gens l'ont consulté

Build a Month Calendar Website

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : un Calendrier mensuel. Ce projet est parfait pour tous ceux qui cherchent à créer un calendrier fonctionnel et visuellement attrayant en JavaScript. Que vous souhaitiez ajouter une fonctionnalité de calendrier à un site Web ou que vous souhaitiez simplement améliorer vos compétences JavaScript, ce projet sera un ajout précieux à votre portfolio.

Aperçu du projet

Le Calendrier mensuel est une application Web qui affiche le mois en cours, mettant en évidence la date du jour et organisant avec précision les jours de la semaine. Le projet montre comment générer dynamiquement un calendrier à l'aide de JavaScript, combiné à une interface élégante et réactive construite avec HTML et CSS.

Caractéristiques

Affichage dynamique du mois : affiche automatiquement le mois et l'année en cours.
Date actuelle en surbrillance : la date du jour est mise en surbrillance pour une identification facile.
Mise en page précise des jours : les jours de la semaine sont correctement alignés en fonction du mois.

Technologies utilisées

HTML : Fournit la structure du calendrier mensuel.
CSS : stylise le calendrier, en s'assurant qu'il est visuellement attrayant et réactif.
JavaScript : Gère la logique de génération du calendrier, y compris le calcul des jours et la mise en évidence de la date actuelle.

Structure du projet

Voici un aperçu de la structure du projet :

Month-Calendar/
├── index.html
├── style.css
└── script.js

Copier après la connexion

index.html : Contient la structure HTML du calendrier mensuel.
style.css : inclut des styles CSS pour créer un design moderne et réactif.
script.js : Gère la fonctionnalité de génération de calendrier.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

git clone https://github.com/abhishekgurjar-in/Month-Calendar.git

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Month-Calendar
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour afficher le calendrier mensuel.

Usage

Ouvrez le site Web dans un navigateur Web.
Affichez le mois en cours avec la date du jour en surbrillance.
Naviguez à travers les jours pour voir la disposition pour tout le mois.

Explication du code

HTML

Le fichier index.html définit la structure du calendrier mensuel, y compris l'affichage du mois et la disposition de la grille pour les jours. En voici un extrait :

<!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>

Copier après la connexion

CSS

Le fichier style.css stylise le calendrier mensuel, le rendant à la fois attrayant et réactif. Voici quelques styles clés :

* {
  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;
}

Copier après la connexion

Javascript

Le fichier script.js contient la logique pour générer le calendrier et mettre en évidence la date actuelle. En voici un extrait :

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;

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du projet Month Calendar ici.

Conclusion

La création du calendrier mensuel a été un projet agréable qui m'a permis de combiner mes compétences en développement front-end avec des fonctionnalités JavaScript pratiques. Cet outil est utile pour afficher les dates du calendrier sur les sites Web et peut être un excellent ajout à vos projets de développement Web. J'espère que vous le trouverez aussi utile que moi. Bon codage !