{"id":413,"date":"2024-08-09T22:16:27","date_gmt":"2024-08-10T01:16:27","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=413"},"modified":"2024-08-09T22:16:27","modified_gmt":"2024-08-10T01:16:27","slug":"como-construir-calendario-em-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/08\/09\/como-construir-calendario-em-javascript\/","title":{"rendered":"Como construir calend\u00e1rio em javascript"},"content":{"rendered":"

\u00a0Como construir calend\u00e1rio em Javascript<\/a>.<\/h1>\n
\n

\"Como<\/p>\n

 <\/p>\n

 <\/p>\n

Como construir um calend\u00e1rio em javascript<\/a>, neste tutorial mostro como criar um calend\u00e1rio estilizado no Javascript utilizando apenas\u00a0 html, CSS e Javascript<\/span>.<\/span><\/p>\n

 <\/p>\n

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