Kalendereffekt basierend auf jQuery

/**
 * 2021/3/6
 * Kalender
 */
 
/* hol y Jahr m Monat vor Tagen
 */
Funktion getBDays(j, m) {
 gibt (neues Datum (y, m, 1) .getDay ()) zurück;
}
 
/* hole y Jahr m Monat Gesamttage
 */
Funktion getTDays( y, m ) {
 gibt zurück (neues Datum (y, m + 1, -1).getDate() + 1);
}
 
/* hole y Jahr m Monat letzte Tage
 */
Funktion getBMDays(j, m) {
 gibt zurück (neues Datum (y, m, -1).getDate() + 1);
}
 
Funktion Kalender( nowDate ) {
 // Jahr, Monat, Tag
 dieses.Jahr = nowDate.getFullYear();
 dieser.Monat = nowDate.getMonth();
 dieser.Tag = nowDate.getDate();
 
 // vor Tagen
 dies.beforeDays = getBDays(dieses.Jahr, dieser.Monat);
 // Tage des aktuellen Monats
 this.totalDays = getTDays(dieses.Jahr, dieser.Monat);
 // Tage des letzten Monats
 diese.letzteTage = getBMDays(dieses.Jahr, dieser.Monat);
 
 // Jetzt Termin vormerken
 dies.nowY = nowDate.getFullYear();
 dies.nowM = nowDate.getMonth();
}
 
Kalender.prototype.initCalendar = Funktion() {
 // Kalender-ID abrufen 
 let calDiv = $("#Kalender").append("<table></table>");
 
 // Kalendertabelle abrufen
 let calTable = $("#Kalender > Tabelle");
 
 // Kalendertabelle hinzufügen tr
 für ( lass n = 0; n < 8; n++ ) {
 calTable.append('<tr></tr>');
 }
 
 // Kalendertabelle abrufen tr: Header
 let calHeadTr = $("#Kalender > Tabelle > tr:erste");
 
 // Kalendertabelle hinzufügen tr th
 für ( lass n = 0; n < 3; n++ ) {
 calHeadTr.append('<th></th>');
 }
 
 // wähle Index > 0 tr
 let calBodyTr = $("#Kalender > Tabelle > tr:gt(0)");
 
 // Kalendertabelle hinzufügen tr td
 für ( lass n = 0; n < 7; n++ ) {
 calBodyTr.append('<td></td>');
 }
}
 
Kalender.prototype.insertDate = Funktion( Kalendername ) {
 // Kalendertabelle abrufen tr td: Header
 let calHeadTh = $("#Kalender > Tabelle > tr:erster > th");
 
 // Header-Inhalt ändern
 $(calHeadTh[0]).html("<a><</a>");
 $(calHeadTh[1]).html(`<a>${this.year} ist ${this.month + 1} Monat</a>`);
 $(calHeadTh[2]).html("<a>></a>");
 
 // Stil zum Header hinzufügen
 $(calHeadTh[1]).attr({
 "colspan" : 5,
 "Titel" : calName
 });
 
 // Wochentags-Arrays
 const calWeekArr = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
 
 // Kalendertabelle abrufen tr td: Wochentage
 let calWeekTd = $("#Kalender > Tabelle > tr:eq(1) > td");
 für ( lass n = 0; n < 7; n++ ) {
 $(calWeekTd[n]).html(`<a>${calWeekArr[n]}</a>`);
 }
 
 // Kalendertabelle abrufen tr td: body
 let calBodyTd = $("#Kalender > Tabelle > tr:gt(1) > td");
 
 // vor Tagen einfügen
 für (let n = this.beforeDays – 1, lastDays = this.lastDays;
 n >= 0;
 n--, letzteTage--) {
 $(calBodyTd[n]).html(`<a>${lastDays}</a>`); 
 $(calBodyTd[n]).attr("Klasse", "anderer Tag");
 }
 // aktuelle Tage einfügen
 für (sei n = this.beforeDays, i = 1;
  i <= diese.totalDays; 
  i++, n++) {
 $(calBodyTd[n]).html(`<a>${i}</a>`);
 
 wenn (i == dieser.Tag && 
  (neues Datum(dieses.Jahr, dieser.Monat, 1).getMonth() == dies.jetztM) &&
  (neues Datum(dieses.Jahr, dieser.Monat, 1).getFullYear() == dieses.jetztJ)) {
 $(calBodyTd[n]).attr("Klasse", "heutzutage");
 }
 anders {
 $(calBodyTd[n]).removeAttr("Klasse", "heutzutage");
 }
 }
 
 // nach Tagen einfügen
 für (sei n = this.beforeDays + this.totalDays, i = 1;
 n < calBodyTd.Länge;
 n++, i++) {
 $(calBodyTd[n]).html(`<a>${i}</a>`);
 $(calBodyTd[n]).attr("Klasse", "anderer Tag");
 }
}
 
Calendar.prototype.update = Funktion( neuesDatum ) {
 // Jahr, Monat, Tag
 dieses.Jahr = neuesDatum.getFullYear();
 dieser.Monat = neuesDatum.getMonth();
 dieser.Tag = neuesDatum.getDate();
 
 // vor Tagen
 dies.beforeDays = getBDays(dieses.Jahr, dieser.Monat);
 // Tage des aktuellen Monats
 this.totalDays = getTDays(dieses.Jahr, dieser.Monat);
 // letzte Monatstage
 diese.letzteTage = getBMDays(dieses.Jahr, dieser.Monat);
}
 
Funktion initDate() {
 // Date-Objekt erstellen
 lass jetzt = neues Datum();
 let cal = neuer Kalender(jetzt);
 
 // init und einfügen
 cal.initCalendar();
 cal.insertDate( 'MeinDatum' );
 
 // Klickereignis zu th:first hinzufügen
 $("#Kalender > Tabelle > tr:first > th:first").click(function(){
 jetzt.setMonth( jetzt.getMonth() - 1 );
 cal.update(jetzt);
 cal.insertDate( 'MeinDatum' );
 });                         
 
 // Klickereignis zu th:last hinzufügen
 $("#Kalender > Tabelle > tr:erster > th:letzter").click(function(){
 jetzt.setMonth( jetzt.getMonth() + 1 );
 cal.update(jetzt);
 cal.insertDate( 'MeinDatum' );
 });
}
 
initDate();

<!DOCTYPE html>
<html>
 <Kopf>
 <meta charset="utf-8" />
 <title>Dokument</title>
 <link href="css/dateCal.css" rel="stylesheet" media="bildschirm">
 </Kopf>
 <Text>
 <div id="Kalender"></div>
 <script src="js/jquery.js"></script>
 <script src="js/dateCal.js"></script>
 </body>
</html>

#Kalender {
 Breite: 200px;
 Polsterung unten: 5px;
 Kastenschatten: 0 1px 3px #ccc;
 Rand: 1px durchgezogen #EDEDED;
}
 
#Kalendertabelle {
 Breite: erben;
 Textausrichtung: zentriert;
 Benutzerauswahl: keine;
 Schriftfamilie: „Comic Sans MS“;
 Rahmen-Zusammenbruch: Zusammenbruch;
 Rahmenabstand: 0px;
}
 
#Kalendertabelle tr th {
 Hintergrund: #f8f8f8;
 Schriftgröße: 12px;
}
 
#Kalendertabelle tr:nth-child(2) {
 Hintergrund: #f8f8f8;
}
 
#Kalendertabelle tr td {
 Schriftgröße: 10px;
}
 
#Kalendertabelle tr td.now-day {
 Farbe: rot;
}
 
#Kalendertabelle tr td.other-day {
 Farbe: hellgrau;
}