Beispiel:Monatskalender-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">  
 <title>Monatskalender - 2</title>  
 <style>

table, td { border: thin solid black; border-collapse: collapse; padding: 0.4em; text-align: center; }

td:nth-of-type(6),td:nth-of-type(7) { 

 background: #ebf5d7;
 color: #666;

}

caption, tr:first-of-type { 

 background: #666;
 color: white;
 font-weight: bold;

font-size: 1.25em; } td.heute { 

 color:red; 
 font-weight: bold;
 background: #ffebe6;

}


</style>

</head> <body>

Monatskalender - 2


<script> document.addEventListener('DOMContentLoaded', function () {


let currentDate = new Date(); let currentMonth = currentDate.getMonth(); // 0–11 let currentYear = currentDate.getFullYear(); // e.g. 2025

renderCalendar(currentMonth, currentYear); 

function renderCalendar(month, year) {
 const monthNames = [
   "Januar", "Februar", "März", "April", "Mai", "Juni",
   "Juli", "August", "September", "Oktober", "November", "Dezember"
 ];

 const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];

 const today = new Date();
 const todayDay = today.getDate();
 const todayMonth = today.getMonth();
 const todayYear = today.getFullYear();

 const firstDay = new Date(year, month, 1);
 let start = firstDay.getDay();
 start = start === 0 ? 6 : start - 1;

 const daysInMonth = new Date(year, month + 1, 0).getDate();

 const table = document.getElementById("kalender");
 table.innerHTML = "";

 // Caption
 const caption = table.createCaption();
 caption.textContent = `${monthNames[month]} ${year}`;

 // Header
 const headerRow = table.insertRow();
 weekdays.forEach(day => {
   const cell = headerRow.insertCell();
   cell.textContent = day;
 });

 let dayNumber = 1;

const totalCells = start + daysInMonth; const rowsNeeded = Math.ceil(totalCells / 7);

for (let rowIndex = 0; rowIndex < rowsNeeded; rowIndex++) { 

 const row = table.insertRow();

 for (let colIndex = 0; colIndex < 7; colIndex++) {
   const cell = row.insertCell();

   const cellIndex = rowIndex * 7 + colIndex;
   const isBeforeStart = cellIndex < start;
   const isAfterEnd = dayNumber > daysInMonth;

   if (isBeforeStart || isAfterEnd) {
     cell.textContent = "";
     continue;
   }

   cell.textContent = dayNumber;
   cell.classList.add("kalendertag");

   if (
     dayNumber === todayDay &&
     month === todayMonth &&
     year === todayYear
   ) {
     cell.classList.add("heute");
     cell.setAttribute("aria-current", "date");
   }

   dayNumber++;
 }

}


}

}); 

 </script>

</body> </html>

Abgerufen am 31.12.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Monatskalender-1.html"