Heim > Artikel > Web-Frontend > So erstellen Sie einen Kalender mit Javascript
Da Webanwendungen immer beliebter werden, müssen viele Entwickler einen Kalender in ihre Website oder Anwendung implementieren, damit Benutzer Daten auswählen können. Es ist einfach, mit JavaScript einen einfachen, aber leistungsstarken Kalender zu erstellen. In diesem Artikel behandeln wir die grundlegenden Schritte zur Implementierung eines Kalenders mit JavaScript und stellen einen Beispielcode bereit.
Zunächst benötigen wir ein HTML-Framework, um unseren Kalender zu hosten. Wir müssen ein <div>
元素,并指定一个唯一的ID,以便我们可以通过JavaScript操作它。我们需要在这个 <div>
-Element erstellen, das zwei Eingabefelder und eine Schaltfläche enthält. Ein Eingabefeld dient zur Anzeige des ausgewählten Datums und das andere zur Aufnahme der Eingabe eines neuen Datums.
In JavaScript erhalten wir das aktuelle Datum mithilfe des Date-Objekts. Wir können das Datum des aktuellen Monats mit der Methode getDate() und das aktuelle Jahr mit der Methode getFullYear() abrufen.
Als nächstes müssen wir einen Kalender erstellen. Mit einem Tabellenelement können wir einen einfachen Kalender erstellen. Wir können eine for-Schleife verwenden, um Tabellenzellen mit Datumsangaben zu generieren. Eine Sache, die wir beachten müssen, ist, dass der erste Tag eines jeden Monats nicht unbedingt ein Sonntag ist. Daher müssen wir den Indexwert der ersten Zelle verwenden, um zu bestimmen, an welchem Datum er beginnen soll.
Um dem Benutzer die Auswahl eines Datums zu ermöglichen, können wir JavaScript verwenden, um die Ereignisse der Eingabe abzuhören Kontrollkästchen, sodass der Kalender aktualisiert wird, wenn ein neues Datum ausgewählt wird. Wir können Date-Objekte verwenden, um zwei Datumsangaben zu vergleichen und die Anzahl der Tage zwischen ihnen zu ermitteln. Wenn das ausgewählte Datum größer als das aktuelle Datum ist, können wir den Kalender vorwärts scrollen, andernfalls können wir den Kalender rückwärts scrollen.
Schließlich müssen wir der Dropdown-Schaltfläche eine Funktionalität hinzufügen, um den Kalender anzuzeigen oder auszublenden, wenn der Benutzer auf die Schaltfläche klickt . Wir können den Kalender ein- oder ausblenden, indem wir CSS-Stile verwenden und dann einen Ereignis-Listener auf der Schaltfläche hinzufügen, um seine Sichtbarkeit umzuschalten.
Einige zusätzliche Funktionen umfassen:
Codebeispiel:
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 += '<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 += '<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 += '<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();
Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Kalender mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!