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.

1. HTML-Skelett

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.

2. Erhalten Sie das aktuelle Datum

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.

3. Kalender erstellen

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.

4. Verarbeitung der Datumsauswahl

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.

5. Schaltflächenfunktion hinzufügen

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:

• Klassen hinzugefügt, um das aktuell ausgewählte Datum sowie das schwebende Datum hervorzuheben
• Differenzierung von Wochenenden und Wochentage
• Probleme über das Jahr/den Monat hinweg lösen

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 += &#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();

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!