Document<\/title>\n <\/head>\n <body>\n <style>\n .code-block{\n background-color: rgb(0, 2, 20);\n \/* border: 2px solid black; *\/\n padding: 0px;\n border-radius: 10px;\n max-width: 1000px;\n max-height: 80vh;\n overflow-y: scroll;\n color: white;\n }\n .code{\n color: white;\n padding: 10px;\n }\n .copy-div{\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: gray;\n padding: 5px 5px;\n border-radius: 10px 10px 0 0;\n position: sticky;\n top: 0;\n }\n .copy-btn{\n border: 1px solid rgb(22, 58, 58);\n background-color: darkslategray;\n padding: 5px 10px;\n color: white;\n border-radius: 5px;\n font-size: 15px;\n cursor: pointer;\n max-height: 30px;\n }\n .heading{\n color: white;\n margin-bottom: 0px;\n }\n .copy-btn:hover{\n background-color: rgb(68, 113, 113);\n }\n ::-webkit-scrollbar {\n display: none;\n }\n .outer{\n display: flex;\n justify-content: center;\n }\n @media (max-width:540px) {\n .copy-btn{\n font-size: 9px;\n }\n .heading{\n font-size: 9px;\n }\n .code{\n font-size: 13px;\n }\n }\n <\/style>\n <section class=\"outer\">\n <div class=\"code-block\">\n <div class=\"copy-div\">\n <p class=\"heading\">HTML, CSS, SCRIPT, Head tags<\/p>\n <button class=\"copy-btn\" id=\"copy-btn1\" onclick=\"copyHtmlCode('code', 'copy-btn1')\">Copy Code<\/button>\n <\/div>\n <p id=\"code\" class=\"code\">\n <!DOCTYPE html><br><html\n lang=”en”><br><head><br><meta\n charset=”UTF-8″><br><meta name=”viewport”\n content=”width=device-width, initial-scale=1.0″><br><title>Calendar<\/title><br><link\n rel=”stylesheet” href=”style.css”><br><link\n href=”https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css”\n rel=”stylesheet”><br><link rel=”stylesheet”\n href=”https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css”><br><\/head><br><br><body><br>\n <style><br> #home{<br> min-height: 95vh;<br>\n background-color: #090912;<br> background-image:\n url(yellow.jpg);<br> background-size: cover;<br> } <br>\n .calendar {<br> position: absolute;<br> top: 0%;<br>\n background-color: #fff;<br> box-shadow: 0 0 10px rgba(0, 0, 0,\n 0.1);<br> padding: 20px;<br> z-index: 1000;<br> display:\n none;<br> left: -1px;<br> }<br> .bg-light-dark{<br>\n background-color: #08071b !important;<br> border: none\n !important;<br> }<br> .day {<br> width: 14.28%;<br> text-align:\n center;<br> padding: 5px;<br> border: 1px solid #ccc;<br> }<br>\n .active{<br> background-color: grey;<br> font-weight:\n bolder;<br> }<br> .hover{<br> background-color: rgb(181, 181,\n 181);<br> font-weight: bolder;<br> cursor: pointer;<br> }<br>\n .form-control::placeholder {<br> color: white;<br> }<br> @media\n (max-width:540px) {<br> .calendar {<br> padding: 10px;<br> }<br>\n .day{<br> font-size: 10px;<br> }<br> .nav-btns{<br> font-size:\n 12px;<br> }<br> }<br> <\/style><br> <ul\n class=”nav justify-content-center py-2 bg-dark”><br> <li\n class=”nav-item”><br> <a href=”index.html”><button\n class=”btn btn-light mx-1 nav-btns”>Single\n Date<\/button><\/a><br> <\/li><br> <li\n class=”nav-item”><br> <a\n href=”calendar.html”><button\n class=”btn btn-light mx-1 nav-btns”>Date\n Range<\/button><\/a><br> <\/li><br> <li\n class=”nav-item”><br> <a\n href=”twomntthcalendar.html”><button\n class=”btn btn-light mx-1 nav-btns”>Month\n Range<\/button><\/a><br> <\/li><br>\n <\/ul><br> <br> <section id=”home”><br> <h5\n class=”text-center pt-5″>Simple Calendar for Single Date\n Selection<\/h5><br> <div\n class=”container pt-2 d-flex justify-content-center “><br>\n <br> <div class=”card card-body bg-dark ”\n style=”max-width: 600px;”><br> <div class=”row”><br>\n <div class=”col-12″><br> <div\n class=”input-group flex-nowrap”><br> <input type=”text”\n id=”dateInput” class=”form-control bg-light-dark text-light”\n placeholder=”Select Date” readonly><br> <button\n id=”openCalendarBtn” class=”btn btn-primary”\n style=”border-radius: 0px 3px 3px 0px;”><i\n class=”bi bi-calendar-range”><\/i><\/button><br>\n <\/div><br> <\/div><br> <div class=”col-12″><br>\n <div id=”calendar” class=”calendar mt-3″><br> <div\n class=”row”><br> <div class=”col-12 d-flex “><br>\n <div class=”form-group w-100 “><br> <select\n id=”yearSelect” class=”form-control”><br> <!– Year\n options will be populated by JavaScript –><br>\n <\/select><br> <\/div><br> <div\n class=”form-group w-100 mx-2″><br> <select\n id=”monthSelect” class=”form-control”><br> <option\n value=”0″>January<\/option><br> <option\n value=”1″>February<\/option><br> <option\n value=”2″>March<\/option><br> <option\n value=”3″>April<\/option><br> <option\n value=”4″>May<\/option><br> <option\n value=”5″>June<\/option><br> <option\n value=”6″>July<\/option><br> <option\n value=”7″>August<\/option><br> <option\n value=”8″>September<\/option><br> <option\n value=”9″>October<\/option><br> <option\n value=”10″>November<\/option><br> <option\n value=”11″>December<\/option><br> <\/select><br>\n <\/div><br> <h6 class=”text-end”><br> <button\n id=”closeCalendarBtn”\n class=”btn btn-secondary”>X<\/button><br>\n <\/h6><br> <\/div><br> <div class=”col-12″><br>\n <div id=”calendarDays” class=”d-flex flex-wrap”><br>\n <!– Calendar days will be populated by JavaScript –><br>\n <\/div><br> <\/div><br> <\/div><br>\n <\/div><br> <\/div><br> <\/div><br>\n <\/div><br> <\/div><br>\n <\/section><br><br><script><br> <br>\/\/ calnedar 1<br>\n \/\/ Get elements<br> const dateInput =\n document.getElementById(‘dateInput’);<br> const openCalendarBtn\n = document.getElementById(‘openCalendarBtn’);<br> const calendar\n = document.getElementById(‘calendar’);<br> const\n closeCalendarBtn =\n document.getElementById(‘closeCalendarBtn’);<br> const\n yearSelect = document.getElementById(‘yearSelect’);<br> const\n monthSelect = document.getElementById(‘monthSelect’);<br> const\n calendarDays =\n document.getElementById(‘calendarDays’);<br><br>\/\/ Function to\n populate years in select<br>function populateYears() {<br> const\n currentYear = new Date().getFullYear();<br> for (let i =\n currentYear – 10; i <= currentYear + 10; i++) {<br> const\n option = document.createElement(‘option’);<br> option.value =\n i;<br> option.textContent = i;<br>\n yearSelect.appendChild(option);<br> }<br> \/\/ Select the first\n option (index 0) by default<br> yearSelect.options[0].selected =\n true;<br>}<br><br>\/\/ Function to populate calendar\n days<br>function populateCalendar(year, month) {<br> \/\/ Select\n the corresponding option in the year select<br> yearSelect.value\n = year;<br><br> \/\/ Select the corresponding option in the month\n select<br> monthSelect.value = month.toString();<br><br>\n calendarDays.innerHTML = ”;<br> const daysInMonth = new\n Date(year, month + 1, 0).getDate();<br> const firstDayOfMonth =\n new Date(year, month, 1).getDay(); \/\/ 0 is Sunday, 1 is Monday,\n etc.<br> const daysOfWeek = [‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’,\n ‘Fri’, ‘Sat’];<br><br> \/\/ Add days of the week headers<br> for\n (let i = 0; i < 7; i++) {<br> const dayHeader =\n document.createElement(‘div’);<br> dayHeader.textContent =\n daysOfWeek[i];<br> dayHeader.classList.add(‘day’,\n ‘font-weight-bold’);<br>\n calendarDays.appendChild(dayHeader);<br> }<br><br> \/\/ Add empty\n cells for days before the first day of the month<br> for (let i\n = 0; i < firstDayOfMonth; i++) {<br> const emptyCell =\n document.createElement(‘div’);<br>\n emptyCell.classList.add(‘day’);<br>\n calendarDays.appendChild(emptyCell);<br> }<br><br> \/\/ Add days\n of the month<br> for (let i = 1; i <= daysInMonth; i++) {<br>\n const day = document.createElement(‘div’);<br> day.textContent =\n i;<br> day.classList.add(‘day’);<br>\n day.addEventListener(‘click’, () => {<br> \/\/ Remove active class\n from all dates<br> const allDays =\n document.querySelectorAll(‘.day’);<br> allDays.forEach(day =>\n day.classList.remove(‘active’));<br> \/\/ Add active class to the\n clicked date<br> day.classList.add(‘active’);<br>\n dateInput.value = `${year}-${String(month + 1).padStart(2,\n ‘0’)}-${String(i).padStart(2, ‘0’)}`;<br> closeCalendar();<br>\n });<br> day.addEventListener(‘mouseover’, () => {<br>\n day.classList.add(‘hover’);<br> });<br>\n day.addEventListener(‘mouseleave’, () => {<br>\n day.classList.remove(‘hover’);<br> });<br>\n calendarDays.appendChild(day);<br> }<br>}<br><br> \/\/ Function to\n open calendar<br> function openCalendar() {<br>\n calendar.style.display = ‘block’;<br> }<br><br> \/\/ Function to\n close calendar<br> function closeCalendar() {<br>\n calendar.style.display = ‘none’;<br> }<br><br> \/\/ Event\n listeners<br> openCalendarBtn.addEventListener(‘click’, () =>\n {<br> populateYears();<br> populateCalendar(new\n Date().getFullYear(), new Date().getMonth());<br>\n openCalendar();<br> });<br><br>\n closeCalendarBtn.addEventListener(‘click’,\n closeCalendar);<br><br> yearSelect.addEventListener(‘change’, ()\n => {<br> populateCalendar(parseInt(yearSelect.value),\n parseInt(monthSelect.value));<br> });<br><br>\n monthSelect.addEventListener(‘change’, () => {<br>\n populateCalendar(parseInt(yearSelect.value),\n parseInt(monthSelect.value));<br>\n });<br><br><\/script><br><\/body><br><\/html>\n <\/p>\n <\/div>\n <\/section>\n <script>\n function copyHtmlCode(copyid, btnid) {\n const codeElement = document.getElementById(copyid);\n const codeText = codeElement.innerText;\n const textarea = document.createElement('textarea');\n textarea.value = codeText;\n textarea.style.position = 'fixed';\n textarea.style.top = 0;\n textarea.style.left = 0;\n textarea.style.opacity = 0;\n\n document.body.appendChild(textarea);\n textarea.select();\n document.execCommand('copy');\n\n document.body.removeChild(textarea);\n const copyButton = document.getElementById(btnid);\n copyButton.innerText = 'Copied';\n\n setTimeout(() => {\n copyButton.innerText = 'Copy Code';\n }, 800);\n }\n\n <\/script>\n <\/body>\n<\/html>\n\n\n\n<pre class=\"wp-block-code\"><code><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Calendar<\/title>\n<link rel=\"stylesheet\" href=\"style.css\">\n<link href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\">\n<\/head>\n\n<body>\n <style>\n #home{\n min-height: 95vh;\n background-color: #090912;\n background-image: url(yellow.jpg);\n background-size: cover;\n } \n .calendar {\n position: absolute;\n top: 0%;\n background-color: #fff;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n padding: 20px;\n z-index: 1000;\n display: none;\n left: -1px;\n }\n .bg-light-dark{\n background-color: #08071b !important;\n border: none !important;\n }\n .day {\n width: 14.28%;\n text-align: center;\n padding: 5px;\n border: 1px solid #ccc;\n }\n .active{\n background-color: grey;\n font-weight: bolder;\n }\n .hover{\n background-color: rgb(181, 181, 181);\n font-weight: bolder;\n cursor: pointer;\n }\n .form-control::placeholder {\n color: white;\n }\n @media (max-width:540px) {\n .calendar {\n padding: 10px;\n }\n .day{\n font-size: 10px;\n }\n .nav-btns{\n font-size: 12px;\n }\n }\n \n <\/style>\n <ul class=\"nav justify-content-center py-2 bg-dark\">\n <li class=\"nav-item\">\n <a href=\"index.html\"><button class=\"btn btn-light mx-1 nav-btns\">Single Date<\/button><\/a>\n <\/li>\n <li class=\"nav-item\">\n <a href=\"calendar.html\"><button class=\"btn btn-light mx-1 nav-btns\">Date Range<\/button><\/a>\n <\/li>\n <li class=\"nav-item\">\n <a href=\"twomntthcalendar.html\"><button class=\"btn btn-light mx-1 nav-btns\">Month Range<\/button><\/a>\n <\/li>\n <\/ul>\n \n\n <section id=\"home\">\n <h5 class=\"text-center pt-5\">Simple Calendar for Single Date Selection<\/h5>\n <div class=\"container pt-2 d-flex justify-content-center \">\n \n <div class=\"card card-body bg-dark \" style=\"max-width: 600px;\">\n <div class=\"row\">\n <div class=\"col-12\">\n <div class=\"input-group flex-nowrap\">\n <input type=\"text\" id=\"dateInput\" class=\"form-control bg-light-dark text-light\" placeholder=\"Select Date\" readonly>\n <button id=\"openCalendarBtn\" class=\"btn btn-primary\" style=\"border-radius: 0px 3px 3px 0px;\"><i class=\"bi bi-calendar-range\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"col-12\">\n <div id=\"calendar\" class=\"calendar mt-3\">\n <div class=\"row\">\n <div class=\"col-12 d-flex \">\n <div class=\"form-group w-100 \">\n <select id=\"yearSelect\" class=\"form-control\">\n \n <\/select>\n <\/div>\n <div class=\"form-group w-100 mx-2\">\n <select id=\"monthSelect\" class=\"form-control\">\n <option value=\"0\">January<\/option>\n <option value=\"1\">February<\/option>\n <option value=\"2\">March<\/option>\n <option value=\"3\">April<\/option>\n <option value=\"4\">May<\/option>\n <option value=\"5\">June<\/option>\n <option value=\"6\">July<\/option>\n <option value=\"7\">August<\/option>\n <option value=\"8\">September<\/option>\n <option value=\"9\">October<\/option>\n <option value=\"10\">November<\/option>\n <option value=\"11\">December<\/option>\n <\/select>\n <\/div>\n <h6 class=\"text-end\">\n <button id=\"closeCalendarBtn\" class=\"btn btn-secondary\">X<\/button>\n <\/h6>\n <\/div>\n <div class=\"col-12\">\n <div id=\"calendarDays\" class=\"d-flex flex-wrap\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n<script>\n \n\/\/ calnedar 1\n \/\/ Get elements\n const dateInput = document.getElementById('dateInput');\n const openCalendarBtn = document.getElementById('openCalendarBtn');\n const calendar = document.getElementById('calendar');\n const closeCalendarBtn = document.getElementById('closeCalendarBtn');\n const yearSelect = document.getElementById('yearSelect');\n const monthSelect = document.getElementById('monthSelect');\n const calendarDays = document.getElementById('calendarDays');\n\n\/\/ Function to populate years in select\nfunction populateYears() {\n const currentYear = new Date().getFullYear();\n for (let i = currentYear - 10; i <= currentYear + 10; i++) {\n const option = document.createElement('option');\n option.value = i;\n option.textContent = i;\n yearSelect.appendChild(option);\n }\n \/\/ Select the first option (index 0) by default\n yearSelect.options[0].selected = true;\n}\n\n\/\/ Function to populate calendar days\nfunction populateCalendar(year, month) {\n \/\/ Select the corresponding option in the year select\n yearSelect.value = year;\n\n \/\/ Select the corresponding option in the month select\n monthSelect.value = month.toString();\n\n calendarDays.innerHTML = '';\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n const firstDayOfMonth = new Date(year, month, 1).getDay(); \/\/ 0 is Sunday, 1 is Monday, etc.\n const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\n \/\/ Add days of the week headers\n for (let i = 0; i < 7; i++) {\n const dayHeader = document.createElement('div');\n dayHeader.textContent = daysOfWeek[i];\n dayHeader.classList.add('day', 'font-weight-bold');\n calendarDays.appendChild(dayHeader);\n }\n\n \/\/ Add empty cells for days before the first day of the month\n for (let i = 0; i < firstDayOfMonth; i++) {\n const emptyCell = document.createElement('div');\n emptyCell.classList.add('day');\n calendarDays.appendChild(emptyCell);\n }\n\n \/\/ Add days of the month\n for (let i = 1; i <= daysInMonth; i++) {\n const day = document.createElement('div');\n day.textContent = i;\n day.classList.add('day');\n day.addEventListener('click', () => {\n \/\/ Remove active class from all dates\n const allDays = document.querySelectorAll('.day');\n allDays.forEach(day => day.classList.remove('active'));\n \/\/ Add active class to the clicked date\n day.classList.add('active');\n dateInput.value = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;\n closeCalendar();\n });\n day.addEventListener('mouseover', () => {\n day.classList.add('hover');\n });\n day.addEventListener('mouseleave', () => {\n day.classList.remove('hover');\n });\n calendarDays.appendChild(day);\n }\n}\n\n \/\/ Function to open calendar\n function openCalendar() {\n calendar.style.display = 'block';\n }\n\n \/\/ Function to close calendar\n function closeCalendar() {\n calendar.style.display = 'none';\n }\n\n \/\/ Event listeners\n openCalendarBtn.addEventListener('click', () => {\n populateYears();\n populateCalendar(new Date().getFullYear(), new Date().getMonth());\n openCalendar();\n });\n\n closeCalendarBtn.addEventListener('click', closeCalendar);\n\n yearSelect.addEventListener('change', () => {\n populateCalendar(parseInt(yearSelect.value), parseInt(monthSelect.value));\n });\n\n monthSelect.addEventListener('change', () => {\n populateCalendar(parseInt(yearSelect.value), parseInt(monthSelect.value));\n });\n\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<p>2. Date Range Selection within a Single Month-<br>The second calendar extends the functionality to allow users to select a date range within the same month. It features two input fields for the start and end dates, along with a calendar interface for intuitive date selection. This calendar is useful for applications involving tasks or events spanning over a specific time frame within a month. Check its live demonstration <a href=\"https:\/\/vyomscode.com\/webdev\/calendar\/calendar.html\">here<\/a> <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"875\" height=\"875\" src=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar2.png\" alt=\"\" class=\"wp-image-60\" style=\"width:392px;height:auto\" srcset=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar2.png 875w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar2-300x300.png 300w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar2-150x150.png 150w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar2-768x768.png 768w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><\/figure><\/div>\n\n\n<pre class=\"wp-block-code\"><code><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Calendar Example<\/title>\n<link href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\">\n<style>\n #home{\n min-height: 100vh;\n background-image: url(bg-blue.jpg);\n background-size: cover;\n padding-top: 70px;\n } \n \/* Custom styles *\/\n .calendar {\n position: absolute;\n top: 0%;\n background-color: #101220;\n color: white;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n padding: 20px;\n z-index: 1000;\n display: none;\n left: 1px;\n justify-content: center;\n }\n .day {\n width: 12.28%;\n text-align: center;\n padding: 5px 1px;\n border: 1px solid #ccc;\n border-radius: 15px;\n margin: 2px;\n }\n .active { \n background-color: rgb(0, 172, 206);\n color: white;\n font-weight: bolder;\n }\n .hover {\n background-color: rgb(0, 172, 206);\n font-weight: bolder;\n cursor: pointer;\n color: white;\n }\n .active-between{\n background-color: rgb(103, 103, 103) !important;\n }\n #calendarDays{\n margin-left: 30px;\n }\n@media (max-width:540px) {\n .calendar {\n padding: 10px;\n }\n .day {\n font-size: 10px;\n }\n #calendarDays{\n margin-left: 10px;\n }\n .nav-btns{\n font-size: 12px;\n }\n}\n.bg-light-dark{\n background-color: #08071b !important;\n border: 1px solid rgb(80, 80, 80) !important;\n }\n .form-control::placeholder {\n color: white;\n}\n<\/style>\n<\/head>\n<body>\n <ul class=\"nav justify-content-center py-2 bg-transparent fixed-top\">\n <li class=\"nav-item\">\n <a href=\"index.html\"><button class=\"btn btn-light mx-1 nav-btns\">Single Date<\/button><\/a>\n <\/li>\n <li class=\"nav-item\">\n <a href=\"calendar.html\"><button class=\"btn btn-light mx-1 nav-btns\">Date Range<\/button><\/a>\n <\/li>\n <li class=\"nav-item\">\n <a href=\"twomntthcalendar.html\"><button class=\"btn btn-light mx-1 nav-btns\">Month Range<\/button><\/a>\n <\/li>\n<\/ul>\n\n<section id=\"home\">\n <h5 class=\"text-center pt-5\">Date Range Selection within a Single Month<\/h5>\n <div class=\"container pt-2 d-flex justify-content-center align-items-center\">\n <div class=\"card card-body bg-dark\" style=\"max-width: 600px;\">\n <div class=\"row\">\n <div class=\"col-12 px-0\">\n <div class=\"input-group flex-nowrap\">\n <input type=\"text\" id=\"startDateInput\" class=\"form-control bg-light-dark text-light\" placeholder=\"Select Start Date\">\n <input type=\"text\" id=\"endDateInput\" class=\"form-control bg-light-dark text-light\" placeholder=\"Select End Date\">\n <button id=\"openCalendarBtn\" class=\"btn btn-primary\" style=\"border-radius: 0px 3px 3px 0px;\"><i class=\"bi bi-calendar-range\"><\/i><\/button>\n <\/div>\n <\/div>\n <div class=\"col-12\">\n <div id=\"calendar\" class=\"calendar mt-3\">\n <div class=\"row\">\n <div class=\"col-12 d-flex \">\n <div class=\"form-group w-100 \">\n <select id=\"yearSelect\" class=\"form-control\">\n \n <\/select>\n <\/div>\n <div class=\"form-group w-100 mx-2\">\n <select id=\"monthSelect\" class=\"form-control\">\n <option value=\"0\">January<\/option>\n <option value=\"1\">February<\/option>\n <option value=\"2\">March<\/option>\n <option value=\"3\">April<\/option>\n <option value=\"4\">May<\/option>\n <option value=\"5\">June<\/option>\n <option value=\"6\">July<\/option>\n <option value=\"7\">August<\/option>\n <option value=\"8\">September<\/option>\n <option value=\"9\">October<\/option>\n <option value=\"10\">November<\/option>\n <option value=\"11\">December<\/option>\n <\/select>\n <\/div>\n <h6 class=\"text-end\">\n <button id=\"closeCalendarBtn\" class=\"btn btn-secondary\">X<\/button>\n <\/h6>\n <\/div>\n <div class=\"col-12\">\n <div id=\"calendarDays\" class=\"d-flex flex-wrap\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n \/\/ Get elements\n const openCalendarBtn = document.getElementById('openCalendarBtn');\n const calendar = document.getElementById('calendar');\n const closeCalendarBtn = document.getElementById('closeCalendarBtn');\n const yearSelect = document.getElementById('yearSelect');\n const monthSelect = document.getElementById('monthSelect');\n const calendarDays = document.getElementById('calendarDays');\n const startDateInput = document.getElementById('startDateInput');\n const endDateInput = document.getElementById('endDateInput');\n\n let selectedStartDate = null;\n let selectedEndDate = null;\n\n \/\/ Function to populate years in select\n function populateYears() {\n const currentYear = new Date().getFullYear();\n for (let i = currentYear - 10; i <= currentYear + 10; i++) {\n const option = document.createElement('option');\n option.value = i;\n option.textContent = i;\n yearSelect.appendChild(option);\n }\n \/\/ Select the first option (index 0) by default\n yearSelect.options[0].selected = true;\n }\n\n \/\/ Function to populate calendar days\n function populateCalendar(year, month) {\n \/\/ Select the corresponding option in the year select\n yearSelect.value = year;\n\n \/\/ Select the corresponding option in the month select\n monthSelect.value = month.toString();\n\n calendarDays.innerHTML = '';\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n const firstDayOfMonth = new Date(year, month, 1).getDay(); \/\/ 0 is Sunday, 1 is Monday, etc.\n const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\n \/\/ Add days of the week headers\n for (let i = 0; i < 7; i++) {\n const dayHeader = document.createElement('div');\n dayHeader.textContent = daysOfWeek[i];\n dayHeader.classList.add('day', 'font-weight-bold');\n calendarDays.appendChild(dayHeader);\n }\n\n \/\/ Add empty cells for days before the first day of the month\n for (let i = 0; i < firstDayOfMonth; i++) {\n const emptyCell = document.createElement('div');\n emptyCell.classList.add('day');\n calendarDays.appendChild(emptyCell);\n }\n\n \/\/ Add days of the month\n for (let i = 1; i <= daysInMonth; i++) {\n const day = document.createElement('div');\n day.textContent = i;\n day.classList.add('day');\n day.addEventListener('click', () => {\n if (!selectedStartDate) {\n selectedStartDate = new Date(year, month, i);\n startDateInput.value = `${String(i).padStart(2, '0')}-${String(month + 1).padStart(2, '0')}-${year}`;\n day.classList.add('active');\n } else if (!selectedEndDate) {\n selectedEndDate = new Date(year, month, i);\n endDateInput.value = `${String(i).padStart(2, '0')}-${String(month + 1).padStart(2, '0')}-${year}`;\n day.classList.add('active');\n \/\/ Ensure end date is greater than or equal to start date\n if (selectedEndDate < selectedStartDate) {\n const temp = selectedStartDate;\n selectedStartDate = selectedEndDate;\n selectedEndDate = temp;\n startDateInput.value = `${selectedStartDate.getFullYear()}-${String(selectedStartDate.getMonth() + 1).padStart(2, '0')}-${String(selectedStartDate.getDate()).padStart(2, '0')}`;\n endDateInput.value = `${selectedEndDate.getFullYear()}-${String(selectedEndDate.getMonth() + 1).padStart(2, '0')}-${String(selectedEndDate.getDate()).padStart(2, '0')}`;\n }\n \/\/ Add .active-between class to dates between start and end dates\n const allDays = document.querySelectorAll('.day');\n allDays.forEach(day => {\n const dayValue = parseInt(day.textContent);\n if (dayValue > selectedStartDate.getDate() && dayValue < selectedEndDate.getDate()) {\n day.classList.add('active-between');\n }\n });\n } else {\n \/\/ Reset selection if a third date is clicked\n const allDays = document.querySelectorAll('.day');\n allDays.forEach(day => {\n day.classList.remove('active');\n day.classList.remove('active-between');\n });\n selectedStartDate = null;\n selectedEndDate = null;\n startDateInput.value = '';\n endDateInput.value = '';\n \/\/ Start new selection\n selectedStartDate = new Date(year, month, i);\n startDateInput.value = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;\n day.classList.add('active');\n }\n });\n day.addEventListener('mouseover', () => {\n day.classList.add('hover');\n });\n day.addEventListener('mouseleave', () => {\n day.classList.remove('hover');\n });\n calendarDays.appendChild(day);\n }\n }\n\n \/\/ Function to open calendar\n function openCalendar() {\n calendar.style.display = 'block';\n }\n\n \/\/ Function to close calendar\n function closeCalendar() {\n calendar.style.display = 'none';\n }\n\n \/\/ Event listeners\n openCalendarBtn.addEventListener('click', () => {\n populateYears();\n const today = new Date();\n populateCalendar(today.getFullYear(), today.getMonth());\n openCalendar();\n });\n\n closeCalendarBtn.addEventListener('click', closeCalendar);\n\n yearSelect.addEventListener('change', () => {\n populateCalendar(parseInt(yearSelect.value), parseInt(monthSelect.value));\n });\n\n monthSelect.addEventListener('change', () => {\n populateCalendar(parseInt(yearSelect.value), parseInt(monthSelect.value));\n });\n<\/script>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<p>3. Date Range Selection across Two Months-<br>Our third calendar enhances the previous functionality by enabling users to select date ranges spanning across two adjacent months. It presents a more flexible option for scenarios where events or tasks may extend beyond a single month boundary while maintaining the same year. This calendar is particularly suitable for planning purposes, such as project timelines or vacation scheduling. Check its live demonstration <a href=\"https:\/\/vyomscode.com\/webdev\/calendar\/twomntthcalendar.html\">here<\/a> <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"827\" height=\"827\" src=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar3.png\" alt=\"\" class=\"wp-image-61\" style=\"width:481px;height:auto\" srcset=\"https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar3.png 827w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar3-300x300.png 300w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar3-150x150.png 150w, https:\/\/blog.vyomscode.com\/wp-content\/uploads\/2024\/04\/calendar3-768x768.png 768w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/><\/figure><\/div>\n\n\n<pre class=\"wp-block-code\"><code><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Calendar<\/title>\n <link href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\">\n <style>\n #home {\n min-height: 95vh;\n background-color: #090912;\n background-image: url(dark.jpg);\n background-size: cover;\n }\n\n .day {\n width: 14.28%;\n text-align: center;\n padding: 3px 4px;\n border: 1px solid #ccc;\n border-radius: 15px;\n margin: 2px;\n background-color: purple;\n color: white;\n }\n\n .dates {\n width: 14.28%;\n text-align: center;\n padding: 3px 4px;\n border: 1px solid #ccc;\n border-radius: 15px;\n margin: 2px;\n background-color: rgb(255, 255, 255);\n color: rgb(0, 0, 0);\n cursor: pointer;\n }\n\n .dates:hover {\n background-color: rgb(232, 232, 232);\n }\n\n .active-date {\n background-color: #007bff;\n color: #fff;\n }\n .active-date:hover {\n background-color: #007bff;\n color: #fff;\n }\n\n .yearinput {\n border: none;\n background-color: transparent;\n text-align: center;\n font-size: 20px;\n font-weight: 700;\n max-width: 100px;\n outline: none;\n }\n .active-between{\n background-color: rgb(232, 232, 232);\n }\n .startdateselected , .Enddateselected{\n background-color: rgb(247, 193, 247);\n padding: 4px 6px;\n border: 1px solid rgb(190, 0, 190);\n color: purple;\n border-radius: 5px;\n }\n .startdateselected b , .Enddateselected b{\n color: rgb(4, 0, 128);\n }\n @media (max-width: 540px) {\n .day {\n font-size: 10px;\n }\n .dates {\n font-size: 14px;\n }\n .startdateselected , .Enddateselected{\n font-size: 15px;\n text-align: center;\n }\n .nav-btns{\n font-size: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <ul class=\"nav justify-content-center py-2 bg-dark\">\n <li class=\"nav-item\">\n <a href=\"index.html\"><button class=\"btn btn-light mx-1 nav-btns\">Single Date<\/button><\/a>\n <\/li>\n <li class=\"nav-item\">\n <a href=\"calendar.html\"><button class=\"btn btn-light mx-1 nav-btns\">Date Range<\/button><\/a>\n <\/li>\n <li class=\"nav-item\">\n <a href=\"twomntthcalendar.html\"><button class=\"btn btn-light mx-1 nav-btns\">Month Range<\/button><\/a>\n <\/li>\n<\/ul>\n\n <section id=\"home\">\n <h5 class=\"text-center pt-5 text-light\">Date Range Selection across Two Months<\/h5>\n <div class=\"container py-2 \">\n <div class=\"card mx-auto\" style=\"max-width: 700px;\">\n <div class=\"card-head\">\n <div class=\"row justify-content-center align-items-center\">\n <div class=\"col-12 d-flex justify-content-center align-items-center mt-2\">\n <i class=\"bi bi-arrow-left-circle-fill btn btn-dark mx-3\" id=\"yearDecrement\" onclick=\" decrementYear()\"><\/i>\n <input type=\"text\" name=\"\" id=\"year\" value=\"2024\" class=\"yearinput\" readonly>\n <i class=\"bi bi-arrow-right-circle-fill btn btn-dark mx-3\" id=\"yearIncrement\" onclick=\"incrementYear()\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"row justify-content-center\">\n <div class=\"col-md-6 border rounded py-3 px-1\">\n <div class=\"row justify-content-center\">\n <div class=\"col-10 d-flex justify-content-between align-items-center border rounded p-2 mx-1 my-2\">\n <i class=\"bi bi-arrow-left-circle-fill btn btn-outline-dark\" id=\"monthDecrement1\"><\/i>\n <span id=\"month1\"><\/span>\n <i class=\"bi bi-arrow-right-circle-fill btn btn-outline-dark\" id=\"monthIncrement1\"><\/i>\n <\/div>\n <div class=\"col-12\">\n <div class=\"d-flex justify-content-between\">\n <span class=\"day\">Sun<\/span>\n <span class=\"day\">Mon<\/span>\n <span class=\"day\">Tue<\/span>\n <span class=\"day\">Wed<\/span>\n <span class=\"day\">Thu<\/span>\n <span class=\"day\"> Fri <\/span>\n <span class=\"day\">Sat<\/span>\n <\/div>\n <div class=\"dates-wrap\" id=\"datesWrap1\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"col-md-6 border rounded py-3 px-1\">\n <div class=\"row justify-content-center\">\n <div class=\"col-10 d-flex justify-content-between align-items-center border rounded p-2 mx-1 my-2\">\n <i class=\"bi bi-arrow-left-circle-fill btn btn-outline-dark\" id=\"monthDecrement2\"><\/i>\n <span id=\"month2\"><\/span>\n <i class=\"bi bi-arrow-right-circle-fill btn btn-outline-dark\" id=\"monthIncrement2\"><\/i>\n <\/div>\n <div class=\"col-12\">\n <div class=\"d-flex justify-content-between\">\n <span class=\"day\">Sun<\/span>\n <span class=\"day\">Mon<\/span>\n <span class=\"day\">Tue<\/span>\n <span class=\"day\">Wed<\/span>\n <span class=\"day\">Thu<\/span>\n <span class=\"day\"> Fri <\/span>\n <span class=\"day\">Sat<\/span>\n <\/div>\n <div class=\"dates-wrap\" id=\"datesWrap2\"><\/div>\n <\/div>\n <\/div>\n <\/div> \n <div class=\"col-12 mt-2 d-md-flex justify-content-between px-0\">\n <h5 class=\"mb-0 mt-1 startdateselected\"><b>From<\/b> <span id=\"startdateselected\">Not Selceted<\/span><\/h5>\n <h5 class=\"mb-0 mt-1 Enddateselected\"><b>To<\/b> <span id=\"Enddateselected\">Not Selceted<\/span><\/h5>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.5.4\/dist\/umd\/popper.min.js\"><\/script>\n <script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"><\/script>\n \n <script>\n window.onload = function() {\n var currentDate = new Date();\n var currentYear = currentDate.getFullYear();\n var currentMonthIndex = currentDate.getMonth();\n\n document.getElementById('year').value = currentYear;\n document.getElementById('month1').innerText = monthLong[currentMonthIndex];\n\n var nextMonthIndex = (currentMonthIndex + 1) % 12;\n document.getElementById('month2').innerText = monthLong[nextMonthIndex];\n\n generateMonthDates(currentYear, currentMonthIndex, 'datesWrap1');\n generateMonthDates(currentYear, nextMonthIndex, 'datesWrap2');\n updateMonthIndices();\n addDateEventListeners();\n\n };\n\n var newYear = parseInt(document.getElementById('year').value);\n var monthLong = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\n \/\/ Global variables to store current month indices\n var month1Index = 0;\n var month2Index = 1;\n\n \/\/ Function to update month text\n function updateMonthText(monthElement, index) {\n monthElement.innerText = monthLong[index];\n }\n\n \/\/ Update global month indices\n function updateMonthIndices() {\n month1Index = monthLong.indexOf(document.getElementById(\"month1\").innerText);\n month2Index = monthLong.indexOf(document.getElementById(\"month2\").innerText);\n }\n\n \/\/ Function to get the number of days in a month\n function daysInMonth(year, month) {\n return new Date(year, month + 1, 0).getDate();\n }\n\n \/\/ Function to get the first day of the month\n function firstDayOfMonth(year, month) {\n return new Date(year, month, 1).getDay();\n }\n\n \/\/ Function to generate dates for a month\n function generateMonthDates(year, month, datesWrapId) {\n const datesWrap = document.getElementById(datesWrapId);\n datesWrap.innerHTML = ''; \/\/ Clear previous dates\n\n const totalDays = daysInMonth(year, month);\n const firstDay = firstDayOfMonth(year, month);\n\n let currentDay = 1;\n \n \/\/ Add dates for the month\n for (let i = 0; i < 5; i++) {\n const datesRow = document.createElement('div');\n datesRow.className = 'd-flex datesrow' + (i + 1);\n\n for (let j = 0; j < 7; j++) {\n if (i === 0 && j < firstDay) {\n \/\/ Add empty slot before the first day of the month\n const emptySlot = document.createElement('span');\n emptySlot.className = 'dates';\n emptySlot.textContent = '0';\n emptySlot.style.visibility = 'hidden'; \/\/ Hide spans with content 0\n datesRow.appendChild(emptySlot);\n } else if (currentDay <= totalDays) {\n \/\/ Add dates for the current month\n const dateElement = document.createElement('span');\n dateElement.className = 'dates';\n dateElement.textContent = currentDay;\n datesRow.appendChild(dateElement);\n currentDay++;\n } else {\n \/\/ Add hidden slot for the remaining days\n const emptySlot = document.createElement('span');\n emptySlot.className = 'dates';\n emptySlot.style.visibility = 'hidden'; \/\/ Hide spans with content 0\n emptySlot.textContent = '0';\n datesRow.appendChild(emptySlot);\n }\n }\n\n datesWrap.appendChild(datesRow);\n }\n }\n\n \/\/ Update calendar when year or month changes\n \n function updateCalendar() {\n generateMonthDates(newYear, month1Index, 'datesWrap1');\n generateMonthDates(newYear, month2Index, 'datesWrap2');\n addDateEventListeners();\n }\n \n\n \/\/ Function to handle year increment\n function incrementYear() {\n newYear += 1;\n document.getElementById('year').value = newYear;\n updateCalendar();\n }\n\n \/\/ Function to handle year decrement\n function decrementYear() {\n newYear -= 1;\n document.getElementById('year').value = newYear;\n updateCalendar();\n }\n\n \/\/ Event listeners for increment buttons\n document.getElementById(\"monthIncrement1\").addEventListener(\"click\", function() {\n month1Index = (month1Index + 1) % 12;\n updateMonthText(document.getElementById(\"month1\"), month1Index);\n updateMonthIndices();\n updateCalendar();\n });\n\n document.getElementById(\"monthIncrement2\").addEventListener(\"click\", function() {\n month2Index = (month2Index + 1) % 12;\n updateMonthText(document.getElementById(\"month2\"), month2Index);\n updateMonthIndices();\n updateCalendar();\n });\n\n \/\/ Event listeners for decrement buttons\n document.getElementById(\"monthDecrement1\").addEventListener(\"click\", function() {\n month1Index = (month1Index - 1 + 12) % 12;\n updateMonthText(document.getElementById(\"month1\"), month1Index);\n updateMonthIndices();\n updateCalendar();\n });\n\n document.getElementById(\"monthDecrement2\").addEventListener(\"click\", function() {\n month2Index = (month2Index - 1 + 12) % 12;\n updateMonthText(document.getElementById(\"month2\"), month2Index);\n updateMonthIndices();\n updateCalendar();\n });\n\n\/\/ Define variables to store start and end dates\nvar startDateElement = null;\nvar endDateElement = null;\n\nfunction handleDateClick(dateElement) {\n var month1 = document.getElementById('month1').innerText;\n var month2 = document.getElementById('month2').innerText;\n\n if (dateElement.parentElement.parentElement.id === 'datesWrap1') {\n if (startDateElement === null) {\n startDateElement = {\n element: dateElement,\n date: dateElement.textContent,\n month: month1,\n year: document.getElementById('year').value\n };\n dateElement.classList.add('active-date');\n removeActiveBetween();\n } else if (endDateElement === null && dateElement !== startDateElement.element) {\n endDateElement = {\n element: dateElement,\n date: dateElement.textContent,\n month: month1,\n year: document.getElementById('year').value\n };\n dateElement.classList.add('active-date');\n markDatesBetween(startDateElement.element, endDateElement.element);\n } else if (dateElement !== startDateElement.element && dateElement !== endDateElement.element) {\n startDateElement.element.classList.remove('active-date');\n endDateElement.element.classList.remove('active-date');\n startDateElement = {\n element: dateElement,\n date: dateElement.textContent,\n month: month1,\n year: document.getElementById('year').value\n };\n endDateElement = null;\n dateElement.classList.add('active-date');\n removeActiveBetween();\n } else {\n startDateElement.element.classList.remove('active-date');\n endDateElement.element.classList.remove('active-date');\n startDateElement = {\n element: dateElement,\n date: dateElement.textContent,\n month: month1,\n year: document.getElementById('year').value\n };\n endDateElement = null;\n dateElement.classList.add('active-date');\n removeActiveBetween();\n }\n } else if (dateElement.parentElement.parentElement.id === 'datesWrap2') {\n if (startDateElement === null) {\n startDateElement = {\n element: dateElement,\n date: dateElement.textContent,\n month: month2,\n year: document.getElementById('year').value\n };\n dateElement.classList.add('active-date');\n removeActiveBetween();\n } else if (endDateElement === null && dateElement !== startDateElement.element) {\n endDateElement = {\n element: dateElement,\n date: dateElement.textContent,\n month: month2,\n year: document.getElementById('year').value\n };\n dateElement.classList.add('active-date');\n markDatesBetween(startDateElement.element, endDateElement.element);\n } else if (dateElement !== startDateElement.element && dateElement !== endDateElement.element) {\n startDateElement.element.classList.remove('active-date');\n endDateElement.element.classList.remove('active-date');\n startDateElement = {\n element: dateElement,\n date: dateElement.textContent,\n month: month2,\n year: document.getElementById('year').value\n };\n endDateElement = null;\n dateElement.classList.add('active-date');\n removeActiveBetween();\n } else {\n startDateElement.element.classList.remove('active-date');\n endDateElement.element.classList.remove('active-date');\n startDateElement = {\n element: dateElement,\n date: dateElement.textContent,\n month: month2,\n year: document.getElementById('year').value\n };\n endDateElement = null;\n dateElement.classList.add('active-date');\n removeActiveBetween();\n }\n }\n\n if (startDateElement !== null && endDateElement !== null) {\n document.getElementById('startdateselected').innerText = startDateElement.date + \" \" + startDateElement.month + \" \" + startDateElement.year;\n document.getElementById('Enddateselected').innerText = endDateElement.date + \" \" + endDateElement.month + \" \" + endDateElement.year;\n }\n\n \/\/ Check if end date is smaller than start date and swap them if needed\n if (startDateElement !== null && endDateElement !== null) {\n const startMonthIndex = monthLong.indexOf(startDateElement.month);\n const endMonthIndex = monthLong.indexOf(endDateElement.month);\n const startDate = new Date(startDateElement.year, startMonthIndex, startDateElement.date);\n const endDate = new Date(endDateElement.year, endMonthIndex, endDateElement.date);\n if (endDate < startDate) {\n const temp = startDateElement;\n startDateElement = endDateElement;\n endDateElement = temp;\n startDateElement.element.classList.add('active-date');\n endDateElement.element.classList.add('active-date');\n\n \/\/ Update displayed dates\n document.getElementById('startdateselected').innerText = startDateElement.date + \" \" + startDateElement.month + \" \" + startDateElement.year;\n document.getElementById('Enddateselected').innerText = endDateElement.date + \" \" + endDateElement.month + \" \" + endDateElement.year;\n }\n }\n if (startDateElement !== null && endDateElement !== null) {\n markDatesBetween(startDateElement.element, endDateElement.element);\n } else {\n removeActiveBetween();\n }\n}\n\n\n\/\/ Function to remove active-between class from all dates\nfunction removeActiveBetween() {\n const dates = document.querySelectorAll('.dates');\n dates.forEach(date => date.classList.remove('active-between'));\n}\n\n\/\/ Function to mark dates between start and end date with .active-between class\nfunction markDatesBetween(startDateElement, endDateElement) {\n const dates = document.querySelectorAll('.dates');\n const startIndex = Array.from(dates).indexOf(startDateElement);\n const endIndex = Array.from(dates).indexOf(endDateElement);\n\n for (let i = startIndex + 1; i < endIndex; i++) {\n dates[i].classList.add('active-between');\n }\n}\n\n\/\/ Function to add event listeners to date elements\nfunction addDateEventListeners() {\n document.querySelectorAll('.dates').forEach(function(dateElement) {\n dateElement.addEventListener('click', function() {\n handleDateClick(dateElement);\n });\n });\n}\naddDateEventListeners();\n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<p>Interactive calendars play a crucial role in enhancing user experience and functionality in web applications. By leveraging HTML, CSS, JavaScript, and Bootstrap, we’ve demonstrated how to create three distinct types of calendars catering to different use cases. Whether it’s selecting a single date, defining date ranges within a month, or spanning across two months, these calendars provide users with intuitive tools for effective date management. Feel free to integrate and customize these calendars into your projects to streamline date-related interactions and improve overall user satisfaction.<\/p>\n\n\n\n<p>Whether you need a custom-designed calendar, additional functionalities, or a comprehensive web development solution, <a href=\"https:\/\/vyomscode.com\/\">VyomsCode<\/a> is here to help. Get in touch with us to discuss your project requirements and let us transform your ideas into reality.<\/p>\n\n\n\n<p>– <a href=\"https:\/\/tripti.vyomscode.com\/\">Tripti<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In today’s digital age, interactive calendars are essential components of web applications. They facilitate date selection, scheduling, and time management. In this blog post, we’ll explore how to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/58"}],"collection":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":8,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/posts\/58\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.vyomscode.com\/index.php\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}