Como construir calendário em javascript
Como construir calendário em Javascript.
Como construir um calendário em javascript, neste tutorial mostro como criar um calendário estilizado no Javascript utilizando apenas html, CSS e Javascript.
Segue abaixo o código utilizado para criar a estrutura do Calendário:
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendário JavaScript</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="calendar"> <div class="header"> <button id="prev-month"><</button> <div id="month-year"></div> <button id="next-month">></button> </div> <div class="weekdays"> <div>Dom</div> <div>Seg</div> <div>Ter</div> <div>Qua</div> <div>Qui</div> <div>Sex</div> <div>Sáb</div> </div> <div id="days"></div> </div> <script src="script.js"></script> </body> </html>
Logo abaixo o código utilizado para estilização do calendário:
body {
font-family: "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #0a1930;
margin: 0;
}
#calendar {
width: 320px;
padding: 20px;
border: 1px solid #f46663;
background-color: #122541;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #122541;
color: #f46663;
font-weight: 900;
border-bottom: 1px solid #3a4669;
border-radius: 5px 5px 0 0;
text-transform: capitalize;
}
.header button {
background: none;
color: #ccc;
font-size: 18px;
font-weight: 900;
cursor: pointer;
padding: 0.5rem 0.5rem;
border-radius: 10px;
border: none;
transition: background-color 0.3s, color 0.3s;
}
.header button:hover {
background-color: #444;
color: #fff;
}
.weekdays,
#days {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 10px;
text-align: center;
color: #ccc;
}
.weekdays div {
font-weight: bold;
margin-bottom: 10px;
color: #aaa;
}
#days div {
padding: 10px;
margin-bottom: 5px;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.3s, color 0.3s, transform 0.2s;
}
#days div:hover {
background-color: #444;
color: #fff;
transform: scale(1.1);
}
#days div.active {
background-color: #f46663;
color: #fff;
}
Segue abaixo o código Javascript usado no tutorial:
const calendar = document.getElementById('calendar');
const monthYear = document.getElementById('month-year');
const daysContainer = document.getElementById('days');
const prevMonthBtn = document.getElementById('prev-month');
const nextMonthBtn = document.getElementById('next-month');
let currentDate = new Date();
function renderCalendar(date) {
const year = date.getFullYear();
const month = date.getMonth();
const today = new Date();
monthYear.textContent = `${date.toLocaleString('pt-BR', { month: 'long' })} ${year}`;
const firstDayOfMonth = new Date(year, month, 1).getDay();
const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
daysContainer.innerHTML = '';
for (let i = 0; i < firstDayOfMonth; i++) {
daysContainer.innerHTML += '<div></div>';
}
for (let i = 1; i <= lastDateOfMonth; i++) {
const dayElement = document.createElement('div');
dayElement.textContent = i;
if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
dayElement.classList.add('active');
}
const dayOfWeek = new Date(year, month, i).getDay();
if (dayOfWeek === today.getDay()) {
dayElement.classList.add('highlight');
}
daysContainer.appendChild(dayElement);
}
}
prevMonthBtn.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar(currentDate);
});
nextMonthBtn.addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar(currentDate);
});
renderCalendar(currentDate);
Vídeo Tutorial Criando um calendário em Javascript:
Código fonte do tutorial:
