WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calendrier
694
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
29 July 2024
calendrier des événements
HTML
Copy
<div class="calendar-icon"> <div class="calendar-header"> <span class="month">Août</span> </div> <div class="calendar-body"> <span class="day">11</span> </div> </div>
CSS
Copy
.calendar-icon { width: 50px; height: 65px; background-color: #fff; border: 2px solid #000; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-family: "Arial", sans-serif; text-align: center; } .calendar-header { background-color: #f00; color: #fff; padding: 5px 0; border-bottom: 2px solid #000; border-top-left-radius: 8px; border-top-right-radius: 8px; } .calendar-header .month { font-size: 1em; font-weight: bold; } .calendar-body { padding: 5px 0; } .calendar-body .day { font-size: 0.4 em; font-weight: bold; color: #000; }
JS
Copy
document.addEventListener("DOMContentLoaded", function () { const date = new Date(); const monthNames = [ "Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Août", "Sep", "Oct", "Nov", "Déc" ]; document.querySelector(".calendar-header .month").textContent = monthNames[date.getMonth()]; document.querySelector(".calendar-body .day").textContent = date.getDate(); });
