Beispiel:Monatskalender-3.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 - 3</title>  
 <style>

table, td, caption { 

   border: 1px 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: #c4ced3;
 font-weight: bold;

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

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

}

nav { display: grid; grid-template-columns: 2em 1fr 2em; gap: 1em; }

nav button { width:2em; aspect-ratio: 1; }

  1. previous-month {

background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35%2C10 l-20%2C15 l20%2C15' fill='none' stroke='green' stroke-width='9' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }

  1. next-month {

background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15%2C10 l20%2C15 l-20%2C15' fill='none' stroke='green' stroke-width='9' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }

  1. calendar-title {

font: bold 1.25em Arial, sans-serif; text-align: center; }


.visually-hidden { 

   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;

}


.wrapper > * { max-width:20em; margin: 0 auto; }

</style>

</head> <body>

Monatskalender - 3

<nav> 

   <button id="previous-month"></button>

   <button id="next-month"></button>

</nav>

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

 const table = document.getElementById("kalender");
 const title = document.getElementById("calendar-title");
 const prevBtn = document.getElementById("previous-month");
 const nextBtn = document.getElementById("next-month");

 const monthNames = [
   "Januar", "Februar", "März", "April", "Mai", "Juni",
   "Juli", "August", "September", "Oktober", "November", "Dezember"
 ];

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

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

 renderCalendar(currentMonth, currentYear);

 prevBtn.addEventListener("click", () => {
   currentMonth--;
   if (currentMonth < 0) {
     currentMonth = 11;
     currentYear--;
   }
   renderCalendar(currentMonth, currentYear);
 });

 nextBtn.addEventListener("click", () => {
   currentMonth++;
   if (currentMonth > 11) {
     currentMonth = 0;
     currentYear++;
   }
   renderCalendar(currentMonth, currentYear);
 });

 function renderCalendar(month, year) {
   table.innerHTML = "";

   // Update calendar title (announced via aria-live)
   title.textContent = `${monthNames[month]} ${year}`;

   // Header row
   const headerRow = table.insertRow();
   weekdays.forEach(day => {
     const th = document.createElement("th");
     th.scope = "col";
     th.textContent = day;
     headerRow.appendChild(th);
   });

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

   let dayNumber = 1;

   for (let rowIndex = 0; rowIndex < 6; rowIndex++) {
     const row = table.insertRow();
     let rowHasDay = false;

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

       const isBeforeStart = rowIndex === 0 && colIndex < start;
       const isAfterEnd = dayNumber > daysInMonth;

       if (isBeforeStart || isAfterEnd) {
         cell.textContent = "";
       } else {
         cell.textContent = dayNumber;
         cell.classList.add("kalendertag");
         rowHasDay = true;

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

         dayNumber++;
       }
     }

     if (!rowHasDay) {
       table.deleteRow(row.rowIndex);
       break;
     }
   }
 }

}); </script> </body> </html>

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