Créer une calendrier dynamique avec javascript
Salut les amis, aujourd'hui dans ce blog, vous apprendrez à créer un nouveau projet de niveau débutant, une calendrier dynamique en HTML CSS & JavaScript.
Comme vous le savez tous, un calendrier est un graphique qui affiche le jour, les semaines et les mois d'une année donnée. Les calendriers vous aident également à rappeler les événements importants, tels que les vacances et les festivals.
Dans ce calendrier dynamique, les utilisateurs peuvent voir la date et le jour actuels. Ils peuvent également voir les jours du mois présent, passé ou futur à l'aide des icônes précédentes et suivantes. Tout cela est fait avec Vanilla JavaScript, ce qui signifie qu'aucune bibliothèque externe n'est utilisée pour créer ce calendrier.
Informations
Si vous comprenez correctement les méthodes et la logique, cela vous aidera à recréer cette application de calendrier ou à en implémenter les codes dans vos projets sans aucune confusion. N'oubliez pas que si vous connaissez déjà la méthode JavaScript Date () et que vous avez créé des projets en l'utilisant, les codes de ce calendrier ne seront pas difficiles à comprendre pour vous.
Mais, si vous souhaitez obtenir les codes sources ou les fichiers de ce calendrier, vous pouvez facilement les copier ou les télécharger depuis le bas de cet article de blog. Si vous voulez un blog sur Date Picker en JavaScript, vous pouvez commenter et j'essaierai d'écrire un blog dessus dès que possible.
Calendrier dynamique en JavaScript [Codes sources]
Pour créer une application de calendrier dynamique à l'aide de HTML CSS et JavaScript, suivez les étapes indiquées ligne par ligne :1. Créez un dossier. Vous pouvez mettre n'importe quel nom de ce dossier et créer les fichiers mentionnés ci-dessous dans ce dossier.
2. Créez un fichier index.html. Le nom du fichier doit être index et son extension .html
3. Créez un fichier style.css. Le nom du fichier doit être style et son extension .css
4. Créez un fichier script.js. Le nom du fichier doit être script et son extension .js
Une fois que vous avez créé ces fichiers, collez les codes donnés dans les fichiers spécifiés. Si vous ne voulez pas les faire, faites défiler vers le bas et téléchargez les codes sources de cette application de calendrier en cliquant sur le bouton de téléchargement donné.
Code HTML
Tout d'abord, collez les codes suivants dans votre fichier index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Calendrier dynamique </title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Lien Google font Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<header>
<p class="current-date"></p>
<div class="icons">
<span id="prev" class="material-symbols-rounded">chevron_left</span>
<span id="next" class="material-symbols-rounded">chevron_right</span>
</div>
</header>
<div class="calendar">
<ul class="weeks">
<li>Dim</li>
<li>Lun</li>
<li>Mar</li>
<li>Mer</li>
<li>Jeu</li>
<li>Ven</li>
<li>Sam</li>
</ul>
<ul class="days"></ul>
</div>
</div>
</body>
</html>
Code CSS
Deuxièmement, collez les codes suivants dans votre fichier style.css
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
padding: 0 10px;
justify-content: center;
min-height: 100vh;
background: #9B59B6;
}
.wrapper{
width: 450px;
background: #fff;
border-radius: 10px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.wrapper header{
display: flex;
align-items: center;
padding: 25px 30px 10px;
justify-content: space-between;
}
header .icons{
display: flex;
}
header .icons span{
height: 38px;
width: 38px;
margin: 0 1px;
cursor: pointer;
color: #878787;
text-align: center;
line-height: 38px;
font-size: 1.9rem;
user-select: none;
border-radius: 50%;
}
.icons span:last-child{
margin-right: -10px;
}
header .icons span:hover{
background: #f2f2f2;
}
header .current-date{
font-size: 1.45rem;
font-weight: 500;
}
.calendar{
padding: 20px;
}
.calendar ul{
display: flex;
flex-wrap: wrap;
list-style: none;
text-align: center;
}
.calendar .days{
margin-bottom: 20px;
}
.calendar li{
color: #333;
width: calc(100% / 7);
font-size: 1.07rem;
}
.calendar .weeks li{
font-weight: 500;
cursor: default;
}
.calendar .days li{
z-index: 1;
cursor: pointer;
position: relative;
margin-top: 30px;
}
.days li.inactive{
color: #aaa;
}
.days li.active{
color: #fff;
}
.days li::before{
position: absolute;
content: "";
left: 50%;
top: 50%;
height: 40px;
width: 40px;
z-index: -1;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.days li.active::before{
background: #9B59B6;
}
.days li:not(.active):hover::before{
background: #f2f2f2;
}
Code JavaScript
Enfin, collez les codes suivants dans votre fichier script.js
const daysTag = document.querySelector(".days"),
currentDate = document.querySelector(".current-date"),
prevNextIcon = document.querySelectorAll(".icons span");
// Obtenir l'année et le mois actuelle
let date = new Date(),
currYear = date.getFullYear(),
currMonth = date.getMonth();
// stocker le nom complet de tous les mois dans le tableau
const months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet",
"Août", "Septembre", "Octobre", "Novembre", "Decembre"];
const renderCalendar = () => {
let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(),
lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(), // obtenir le premier date du mois
lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(), // obtenir le dernier jour du mois
lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate(); // obtenir la dernière date du mois précédent
let liTag = "";
for (let i = firstDayofMonth; i > 0; i--) { // création du mois précédent derniers jours
liTag += `${lastDateofLastMonth - i + 1} `;
}
for (let i = 1; i <= lastDateofMonth; i++) { // création de li de tous les jours du mois en cours
// ajout de la classe active à li si le jour, le mois et l'année actuels correspondent
let isToday = i === date.getDate() && currMonth === new Date().getMonth()
&& currYear === new Date().getFullYear() ? "active" : "";
liTag += `${i} `;
}
for (let i = lastDayofMonth; i < 6; i++) { // création li du mois prochain premiers jours
liTag += `${i - lastDayofMonth + 1} `
}
currentDate.innerText = `${months[currMonth]} ${currYear}`; // passer le mois et l'année en cours comme texte de la date actuelle
daysTag.innerHTML = liTag;
}
renderCalendar();
prevNextIcon.forEach(icon => { // obtenir les icônes précédent et suivant
icon.addEventListener("click", () => { // ajouter un événement de clic sur les deux icônes
// si l'icône cliqué est l'icône précédente alors décrémente le mois en cours de 1 sinon l'incrémente de 1
currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;
if(currMonth < 0 || currMonth > 11) { // si le mois en cours est inférieur à 0 ou supérieur à 11
// création d'une nouvelle date de l'année et du mois en cours et transmission comme valeur de date
date = new Date(currYear, currMonth);
currYear = date.getFullYear(); // mise à jour de l'année en cours avec la nouvelle année de date
currMonth = date.getMonth(); // updating current month with new date month
} else {
date = new Date(); // passer la date du jour comme valeur de date
}
renderCalendar(); // appel de la fonction renderCalendar
});
});
C'est tout, vous avez maintenant créé avec succès une application de calendrier dynamique en HTML CSS et JavaScript. Si votre code ne fonctionne pas ou si vous rencontrez des problèmes, veuillez télécharger les fichiers de code source à partir du bouton de téléchargement indiqué. C'est gratuit et un fichier zip sera téléchargé contenant le dossier du projet avec les fichiers de code source.
Télécharger le code source
Commentaires