Kalendarz: model tygodni i widok tabeli

Praktyka: tabliczka mnożenia i kalendarz na stronie - JavaScript na stronach WWW (HTML/CSS/JS)

Kalendarz w dwóch częściach. Model: `monthWeeks(rok, miesiąc)` zwraca tablicę tygodni po 7 pól (puste pola `null`), licząc od poniedziałku (`(getDay() + 6) % 7` przesuwa niedzielę na koniec). Widok: `render` zamienia tygodnie na wiersze tabeli. Przyciski zmieniają miesiąc; przejście przez koniec roku załatwia liczenie miesięcy od zera i dzielenie z resztą.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Kalendarz</title>
  <style>
    body { font-family: sans-serif; max-width: 36em; line-height: 1.4; }
    input, select, button, textarea { font: inherit; padding: 0.2em 0.4em; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 0.2em 0.6em; }

    #cal td { height: 2em; cursor: pointer; }
    #cal td.weekend { color: #dc2626; }
    #cal td.today { outline: 2px solid #4f46e5; }
    #cal td.selected { background: #fde68a; }
    #cal td.has-note { font-weight: bold; text-decoration: underline; }
  </style>
</head>
<body>
  <button id="prev">&lt;</button>
                  <strong id="title"></strong>
                  <button id="next">&gt;</button>

  <table id="cal">
    <thead><tr><th>Pn</th><th>Wt</th><th>Śr</th><th>Cz</th><th>Pt</th><th>So</th><th>Nd</th></tr></thead>
    <tbody></tbody>
  </table>
  <script>
    const MONTHS = ['styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec',
      'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień'];
    // tygodnie miesiaca (month od 1): tablica tygodni po 7 dni, puste pola = null, od poniedzialku
    function monthWeeks(year, month) {
      const first = new Date(year, month - 1, 1);
      const days = new Date(year, month, 0).getDate();
      const blanks = (first.getDay() + 6) % 7;
      const cells = Array(blanks).fill(null);
      for (let d = 1; d <= days; d++) cells.push(d);
      while (cells.length % 7 !== 0) cells.push(null);
      const weeks = [];
      for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
      return weeks;
    }
    function render(year, month) {
      const tbody = document.querySelector('#cal tbody');
      tbody.replaceChildren();
      for (const week of monthWeeks(year, month)) {
        const tr = document.createElement('tr');
        for (const day of week) {
          const td = document.createElement('td');
          if (day !== null) {
            td.textContent = day;
            td.dataset.day = day;
          }
          tr.append(td);
        }
        tbody.append(tr);
      }
    }
    let year = 2026;
    let month = 11;

    function show() {
      document.getElementById('title').textContent = `${MONTHS[month - 1]} ${year}`;
      render(year, month);
    }

    function move(delta) {
      const index = year * 12 + (month - 1) + delta;
      year = Math.floor(index / 12);
      month = (index % 12) + 1;
      show();
    }

    document.getElementById('prev').addEventListener('click', () => move(-1));
    document.getElementById('next').addEventListener('click', () => move(1));
    show();
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript na stronach WWW·Zaloguj się, aby zapisać postęp na koncie.