Cara membuat kalendar menggunakan javascript

Apabila aplikasi web menjadi semakin popular, ramai pembangun perlu melaksanakan kalendar dalam tapak web atau aplikasi mereka untuk membolehkan pengguna memilih tarikh. Mudah untuk membuat kalendar yang ringkas tetapi berkuasa menggunakan JavaScript. Dalam artikel ini, kami akan membincangkan langkah asas untuk melaksanakan kalendar menggunakan JavaScript dan menyediakan kod sampel.

1. Skeleton HTML

Pertama, kami memerlukan rangka kerja HTML untuk mengehoskan kalendar kami. Kami perlu mencipta elemen <div> dan menetapkan ID unik supaya kami boleh memanipulasinya melalui JavaScript. Kita perlu memasukkan dua kotak input dan satu butang dalam elemen <code><div> ini, satu kotak input untuk memaparkan tarikh yang dipilih dan satu lagi untuk menerima input tarikh baharu. <ol start="2"><li>Dapatkan tarikh semasa </li></ol> <p>Dalam JavaScript, kami mendapat tarikh semasa dengan menggunakan objek Tarikh. Kita boleh mendapatkan tarikh bulan semasa menggunakan kaedah getDate() dan mendapatkan tahun semasa menggunakan kaedah getFullYear(). </p> <ol start="3"><li>Membina kalendar </li></ol> <p>Seterusnya, kita perlu membina kalendar. Kita boleh mencipta kalendar ringkas menggunakan elemen jadual. Kita boleh menggunakan gelung for untuk menjana sel jadual yang mengandungi tarikh. Satu perkara yang perlu kita ambil perhatian ialah hari pertama setiap bulan tidak semestinya hari Ahad, jadi kita perlu menggunakan nilai indeks sel pertama untuk menentukan tarikh ia harus bermula. </p> <ol start="4"><li>Mengendalikan pemilihan tarikh</li></ol> <p>Untuk membenarkan pengguna memilih tarikh, kami boleh menggunakan JavaScript untuk mendengar acara kotak input untuk mengemas kini kalendar apabila baharu tarikh dipilih. Kita boleh menggunakan objek Tarikh untuk membandingkan dua tarikh dan mendapatkan bilangan hari antara tarikh tersebut. Jika tarikh yang dipilih lebih besar daripada tarikh semasa maka kita boleh menatal kalendar ke hadapan jika tidak, kita boleh menatal kalendar ke belakang. </p> <ol start="5"><li>Tambah kefungsian butang </li></ol> <p>Akhir sekali, kita perlu menambah kefungsian pada butang lungsur untuk menunjukkan atau menyembunyikan kalendar apabila pengguna mengklik butang. Kami boleh menyembunyikan atau menunjukkan kalendar dengan menggunakan gaya CSS dan kemudian menambahkan pendengar acara pada butang untuk menogol keterlihatannya. </p> <p>Beberapa ciri tambahan termasuk: </p> <ul> <li>Tambah kelas untuk menyerlahkan tarikh yang dipilih pada masa ini serta tarikh yang dilegar </li> <li>Bezakan antara hujung minggu dan hari bekerja</li> <li>Selesaikan isu merentas tahun/bulan</li> </ul> <p>Contoh kod:</p> <p>HTML:</p> <pre class="brush:php;toolbar:false">&lt;div&gt;   &lt;input&gt;   &lt;input&gt;   &lt;button&gt;V&lt;/button&gt;   &lt;table&gt;&lt;/table&gt; &lt;/div&gt;</pre> <p>CSS:</p> <pre class="brush:php;toolbar:false">#calendar {   position: relative; } #calendar input[type=&quot;text&quot;] {   padding: 5px;   border: 1px solid #ccc;   font-size: 16px; } #calendar table {   display: none;   position: absolute;   top: 30px;   left: 0;   border-collapse: collapse; } #calendar td {   padding: 5px;   text-align: center;   cursor: pointer; } #calendar .currentDay {   background-color: #B6D9FA; } #calendar .hoverDay {   background-color: #EAEAEA; } #calendar .weekend {   color: red; }</pre> <p>JavaScript :</p> <pre class="brush:php;toolbar:false">var currentDate = new Date(); var selectedDate = document.getElementById('selectedDate'); var newDate = document.getElementById('newDate'); var calBtn = document.getElementById('calBtn'); var calendarTable = document.getElementById('calendarTable'); // Update selected date whenever the date input is changed selectedDate.addEventListener('change', function() {   currentDate = new Date(selectedDate.value);   updateCalendar(); }); // Show/hide calendar when button is clicked calBtn.addEventListener('click', function() {   if (calendarTable.style.display === 'none') {     calendarTable.style.display = 'table';   } else {     calendarTable.style.display = 'none';   } }); // Add event listeners for hovering over calendar dates calendarTable.addEventListener('mouseover', function(e) {   if (e.target.nodeName === 'TD' &amp;&amp; e.target.innerHTML !== '') {     e.target.classList.add('hoverDay');   } }); calendarTable.addEventListener('mouseout', function(e) {   if (e.target.nodeName === 'TD' &amp;&amp; e.target.innerHTML !== '') {     e.target.classList.remove('hoverDay');   } }); // Generate calendar function updateCalendar() {   var currentMonth = currentDate.getMonth();   var currentYear = currentDate.getFullYear();   var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();   var firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();   var lastDayIndex = new Date(currentYear, currentMonth, daysInMonth).getDay();   var prevMonthDays = new Date(currentYear, currentMonth, 0).getDate();   var calendarHtml = '';      // Add table headings   calendarHtml += '&lt;tr&gt;&lt;th&gt;' + getMonthName(currentMonth) + ' ' + currentYear + '&lt;/th&gt;&lt;/tr&gt;'   calendarHtml += '&lt;tr&gt; &lt;th&gt;Sun&lt;/th&gt; &lt;th&gt;Mon&lt;/th&gt; &lt;th&gt;Tue&lt;/th&gt; &lt;th&gt;Wed&lt;/th&gt; &lt;th&gt;Thu&lt;/th&gt; &lt;th&gt;Fri&lt;/th&gt; &lt;th&gt;Sat&lt;/th&gt; &lt;/tr&gt;';      // Add days of previous month before the first day of current month   var prevMonthDaysToAdd = firstDayIndex === 0 ? 6 : firstDayIndex - 1;   var prevMonthStartDay = prevMonthDays - prevMonthDaysToAdd + 1;   for (var i = 0; i ' + prevMonthStartDay + '';     prevMonthStartDay++;   }      // Add days of current month   for (var i = 1; i ' + i + '';     } else if (isWeekend(new Date(currentYear, currentMonth, i).getDay())) {       calendarHtml += '&lt;td&gt;' + i + '&lt;/td&gt;';     } else {       calendarHtml += '&lt;td&gt;' + i + '&lt;/td&gt;';     }     if (new Date(currentYear, currentMonth, i).getDay() === 6) {       calendarHtml += '&lt;tr&gt;';     }   }      // Add days of next month after the last day of current month   var nextMonthDaysToAdd = lastDayIndex === 0 ? 0 : 7 - lastDayIndex;   for (var i = 1; i ' + i + '';     if (lastDayIndex === 6 &amp;&amp; i === nextMonthDaysToAdd) {       break;     }   }      // Append the calendar to the HTML   calendarTable.innerHTML = calendarHtml; } // Get the name of the month from its numerical value function getMonthName(month) {   var monthNames = ['January', 'February', 'March', 'April', 'May', 'June',     'July', 'August', 'September', 'October', 'November', 'December'   ];   return monthNames[month]; } // Check if a day is a weekend day function isWeekend(day) {   return day === 0 || day === 6; } updateCalendar();&lt;/tr&gt;</pre> </div>