{"id":28729,"date":"2024-04-04T23:01:44","date_gmt":"2024-04-04T22:01:44","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/calendario-interactivo-con-eventos-en-javascript-guia-completa\/"},"modified":"2024-06-03T17:42:09","modified_gmt":"2024-06-03T16:42:09","slug":"calendario-interactivo-con-eventos-en-javascript-guia-completa","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/","title":{"rendered":"Interactive Calendar with Events in JavaScript: Complete Guide"},"content":{"rendered":"<p>Creating an interactive calendar on a website can seem like a challenging task, especially if you want to integrate functionality such as event management. However, with pure JavaScript, you can build an effective and dynamic solution that adapts to the needs of your projects or even your day-to-day life in organizing events. Below, I&#039;ll guide you step by step through creating an interactive calendar, explaining each part of the development process and how you can customize it to fit your requirements.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/#%C2%BFPor_Que_Crear_Tu_Propio_Calendario_Con_JavaScript\" >Why Create Your Own Calendar With JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/#Empezando_con_el_HTML_Basico\" >Getting started with Basic HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/#Configurando_el_CSS_para_Estilizar_el_Calendario\" >Setting CSS to Style the Calendar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/#Programando_el_Calendario_con_JavaScript\" >Programming the Calendar with JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/#Creando_la_Estructura_del_Calendario\" >Creating the Calendar Structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/#Agregando_Eventos_al_Calendario\" >Adding Events to the Calendar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/#Integrando_Todo\" >Integrating Everything<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/interactive-calendar-with-events-in-javascript-complete-guide\/#Personalizacion_y_Expansion\" >Customization and Expansion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFPor_Que_Crear_Tu_Propio_Calendario_Con_JavaScript\"><\/span>Why Create Your Own Calendar With JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>While many libraries and frameworks offer ready-to-use components, developing your own calendar with JavaScript offers flexibility and complete control over functionality and style. In addition, it allows you to better understand how interactions work on the web and improve your programming skills.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Empezando_con_el_HTML_Basico\"><\/span>Getting started with Basic HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>First, you need to structure the HTML that will serve as the skeleton of your calendar. Here a simple example:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;div id=&quot;calendar&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>This <code>div<\/code> It will contain the entire calendar. From here, we will use JavaScript to build the calendar items dynamically.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Configurando_el_CSS_para_Estilizar_el_Calendario\"><\/span>Setting CSS to Style the Calendar<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before jumping into JavaScript, it&#039;s a good idea to style our calendar. Here is a basic CSS example that you can expand according to your needs:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">#calendar { width: 300px; border: 1px solid #ccc; padding: 10px; } .calendar-day { width: 40px; height: 40px; display: inline-block; border: 1px solid #ddd; text-align: center; }<\/code><\/pre>\n<p>These styles are just a starting point. You can customize them to fit the design of your website.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Programando_el_Calendario_con_JavaScript\"><\/span>Programming the Calendar with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now, let&#039;s get to the heart of the matter: calendar scheduling. We will begin by defining the basic structure of our calendar.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creando_la_Estructura_del_Calendario\"><\/span>Creating the Calendar Structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First, we need a function that can generate the calendar for us:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">function createCalendar(year, month) { const days = [&#039;Sun&#039;, &#039;Mon&#039;, &#039;Tue&#039;, &#039;Wed&#039;, &#039;Thu&#039;, &amp;1TP 5T039;Fri&#039;, &#039;Sat&#039;]; let calendar = document.getElementById(&#039;calendar&#039;); calendar.innerHTML = &#039;&#039;; \/\/ Create the days of the week days.forEach(day =&gt; { let dayElement = document.createElement(&#039;div&#039;); dayElement.className = &#039;calendar-day&#039;; dayElement.textContent = day; calendar.appendChild( dayElement); \/\/ Calculation of days in a month const startDate = new Date(year, month, 1); const endDate = new Date(year, month + 1, 0); const numDays = endDate.getDate(); \/\/ Add the calendar days for (let i = 1; i &lt;= numDays; i++) { let dayElement = document.createElement(&#039;div&#039;); dayElement.className = &#039;calendar-day&#039;; dayElement.textContent = i; calendar.appendChild(dayElement); } }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Agregando_Eventos_al_Calendario\"><\/span>Adding Events to the Calendar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To make our calendar interactive, we can add events to certain days. This can be done by extending our function:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">function addEvent(day, eventName) { let dayElement = document.querySelector(`#calendar .calendar-day:nth-child(${day + 7})`); dayElement.innerHTML += `&lt;span class=&#039;event&#039;&gt;${eventName}&lt;\/span&gt;`; dayElement.style.backgroundColor = &amp;quot;yellow&amp;quot;; }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Integrando_Todo\"><\/span>Integrating Everything<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Finally, we must put all these pieces together. This is where we call our functions to build and populate the calendar:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">createCalendar(2023, 9); \/\/ October 2023 addEvent(15, &quot;Ana&#039;s Birthday&quot;);<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Personalizacion_y_Expansion\"><\/span>Customization and Expansion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The code provided here is quite basic and serves as an excellent foundation. You can expand it by adding features such as changing months, years and more interactive events.<\/p>\n<p>To learn more about how to boost your web developments and explore other interesting projects, be sure to visit <a href=\"https:\/\/nelkodev.com\/en\/\">my blog<\/a> and if you have questions or want to contact me directly, you can do so through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">this link<\/a>.<\/p>\n<p>Creating your own interactive calendar is not only a rewarding project, but also a great way to deepen your web development skills with JavaScript. Each element you add or customize gives you a new tool that you can apply in future projects. Let&#039;s get to work and code!<\/p>","protected":false},"excerpt":{"rendered":"<p>Creating an interactive calendar on a website can seem like a challenging task, especially if you want to integrate functionalities such as event management. However, with pure JavaScript, you can build an effective and dynamic solution that adapts to the needs of your projects or even your day-to-day work organization.<\/p>","protected":false},"author":1,"featured_media":28730,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1901],"tags":[205,1910,500,90,551,358,407,185,627,1008],"class_list":["post-28729","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-proyecto","tag-blog","tag-calendario","tag-completa","tag-con","tag-eventos","tag-guia","tag-interactivo","tag-javascript","tag-proyecto","tag-pruebas"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28729"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28729\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28730"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}