Como estilzar um Calendário Html
Neste tutorial mostro como criar um Calendário estilizado usando apenas CSS e Html.
Este em um breve tutorial que mostro como construir e estilizar um calendário estilizado usando html, css e javascript.
Segue abaixo o código utilizado para criar a estrutura do calendário Html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendário</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prata&family=Unbounded:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calendar" id="calendar"> <div class="calendar__header"> <button class="calendar__header-button" onclick="updateCurrentDate(-1)"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 16 8 12 12 8"></polyline> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> </button> <span class="calendar__header-month">Abril</span> <button class="calendar__header-button" onclick="updateCurrentDate(1)"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 16 16 12 12 8"></polyline> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> </button> </div> <div class="calendar__body"> <div class="calendar__body-day"> <span class="calendar__body-day-number">12</span> <span class="calendar__body-day-week">Seg</span> </div> <div class="calendar__body-day"> <span class="calendar__body-day-number">13</span> <span class="calendar__body-day-week">Seg</span> </div> <div class="calendar__body-day day-active"> <span class="calendar__body-day-number">14</span> <span class="calendar__body-day-week">Seg</span> </div> <div class="calendar__body-day"> <span class="calendar__body-day-number">15</span> <span class="calendar__body-day-week">Seg</span> </div> <div class="calendar__body-day"> <span class="calendar__body-day-number">16</span> <span class="calendar__body-day-week">Seg</span> </div> </div> </div> <script src="main.js"></script> </body> </html>
Segue abaixo o código utilizado para estilizar o calendário:
*,
*:after,
*:before {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
}
:root {
--white: #fff;
--purple: #474d84;
--background-calendar: rgba(20, 68, 128, 0.3);
--lils: #b872ff;
--main-bg-color: linear-gradient(
180deg,
#474d84 0%,
#041832 48.44%,
#01080e 100%
);
}
body * {
font-family: "Unbounded", cursive;
}
body {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--main-bg-color);
}
.calendar {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
background: var(--background-calendar);
border: 0.2rem solid var(--purple);
}
.calendar__header {
width: calc(100% - 1rem);
padding: 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.calendar__header-month {
font-style: normal;
font-weight: 900;
font-size: 1.8rem;
letter-spacing: 0.1rem;
color: var(--white);
}
.calendar__header-button {
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.1s ease-in-out;
}
.calendar__header-button svg {
color: var(--lils);
width: 2rem;
height: 2rem;
}
.calendar__header-button:active {
transform: scale(0.96);
}
.calendar__body {
padding: 0.5rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
transition: transform 0.5s ease;
}
.calendar__body-day {
padding: 1.1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
border-radius: 24px;
background: var(--white);
color: var(--purple);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.calendar__body-day.day-active {
background: var(--purple);
color: var(--white);
}
.calendar__body-day-number {
font-style: normal;
font-weight: 900;
font-size: 1rem;
letter-spacing: 0.1rem;
}
.calendar__body-day-week {
font-weight: 700;
font-size: 12px;
letter-spacing: 0.0725rem;
}
.fade {
animation-name: fade;
animation-duration: 1.8s;
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
Segue abaixo o código Javascript usado no tutorial:
const months = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro",];const abbreviatedWeekdays = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];const getDays = (currentDate) => {const diasAnteriores = getDiasAnteriores(currentDate);const diasPosteriores = getNextDays(currentDate);const days = [...diasAnteriores, currentDate, ...diasPosteriores];days.sort((a, b) => a.getTime() - b.getTime());return days;};const getNextDays = (data) => {let nextDays = new Date(data);const tresProximosDias = [];for (let i = 0; i < 2; i++) {nextDays.setDate(nextDays.getDate() + 1);tresProximosDias.push(new Date(nextDays));}return tresProximosDias;};const getDiasAnteriores = (data) => {let nextDays = new Date(data);const tresProximosDias = [];for (let i = 0; i < 2; i++) {nextDays.setDate(nextDays.getDate() - 1);tresProximosDias.push(new Date(nextDays));}return tresProximosDias;};const getDaysOfWeek = (days) => {const daysOfWeek = days.map((day) => {const dayOfWeek = day.getDay();const nameOfDayOfWeek = abbreviatedWeekdays[dayOfWeek];const isCurrentDay = day === currentDate;return {day: day.getDate(),nameOfDayOfWeek: nameOfDayOfWeek,isCurrentDay,};});return daysOfWeek;};const getMonthFullName = (day) => {const monthNumber = day.getMonth();return months[monthNumber];};const getDayElement = (info) => {const classActive = info.isCurrentDay ? "day-active fade" : "";const dayFormatted = info.day.toString().padStart(2, "0");return `<div class="calendar__body-day ${classActive}"><span class="calendar__body-day-number ">${dayFormatted}</span><span class="calendar__body-day-week">${info.nameOfDayOfWeek}</span></div>`;};const setCalendarBody = (days) => {const calendarBody = document.querySelector("#calendar .calendar__body");const daysElements = days.map((day) => {return getDayElement(day);});calendarBody.innerHTML = daysElements.join("");};const setCalendarTitle = (monthFullName) => {const calendarTitle = document.querySelector("#calendar .calendar__header-month");calendarTitle.textContent = monthFullName;};const setCalendarInfo = (currentDate) => {const monthFullName = getMonthFullName(currentDate);const days = getDays(currentDate);const daysOfWeekFormated = getDaysOfWeek(days);setCalendarBody(daysOfWeekFormated);setCalendarTitle(monthFullName);console.log(daysOfWeekFormated);};const updateCurrentDate = (value) => {currentDate.setDate(currentDate.getDate() + value);setCalendarInfo(currentDate);};// date 13-04-2024let currentDate = new Date();setCalendarInfo(currentDate);
Você pode visualizar aqui :
https://urutaudev.com.br/aplicativos/calendario-estilizado/
Vídeo Tutorial:
Parte 1:
Parte 2:
Código fonte do tutorial:
