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 <div> ini, satu kotak input untuk memaparkan tarikh yang dipilih dan satu lagi untuk menerima input tarikh baharu.

2. Dapatkan tarikh semasa

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().

3. Membina kalendar

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.

4. Mengendalikan pemilihan tarikh

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.

5. Tambah kefungsian butang

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.

Beberapa ciri tambahan termasuk:

• Tambah kelas untuk menyerlahkan tarikh yang dipilih pada masa ini serta tarikh yang dilegar
• Bezakan antara hujung minggu dan hari bekerja
• Selesaikan isu merentas tahun/bulan

Contoh kod:

HTML:

<div id="calendar">
  <input type="text" id="selectedDate" placeholder="Select date">
  <input type="text" id="newDate" placeholder="Enter date">
  <button id="calBtn">V</button>
  <table id="calendarTable"></table>
</div>

CSS:

#calendar {
  position: relative;
}
#calendar input[type="text"] {
  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;
}

JavaScript :

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' && e.target.innerHTML !== '') {
    e.target.classList.add('hoverDay');
  }
});

calendarTable.addEventListener('mouseout', function(e) {
  if (e.target.nodeName === 'TD' && 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 += '<tr><th colspan="7">' + getMonthName(currentMonth) + ' ' + currentYear + '</th></tr>'
  calendarHtml += '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>';
  
  // 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 < prevMonthDaysToAdd; i++) {
    calendarHtml += &#39;<td class="otherMonth">' + prevMonthStartDay + '</td>';
    prevMonthStartDay++;
  }
  
  // Add days of current month
  for (var i = 1; i <= daysInMonth; i++) {
    if (i === currentDate.getDate() && currentMonth === new Date().getMonth() && currentYear === new Date().getFullYear()) {
      calendarHtml += &#39;<td class="currentDay">' + i + '</td>';
    } else if (isWeekend(new Date(currentYear, currentMonth, i).getDay())) {
      calendarHtml += '<td class="weekend">' + i + '</td>';
    } else {
      calendarHtml += '<td>' + i + '</td>';
    }
    if (new Date(currentYear, currentMonth, i).getDay() === 6) {
      calendarHtml += '</tr><tr>';
    }
  }
  
  // Add days of next month after the last day of current month
  var nextMonthDaysToAdd = lastDayIndex === 0 ? 0 : 7 - lastDayIndex;
  for (var i = 1; i <= nextMonthDaysToAdd; i++) {
    calendarHtml += &#39;<td class="otherMonth">' + i + '</td>';
    if (lastDayIndex === 6 && 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();

Atas ialah kandungan terperinci Cara membuat kalendar menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!