Kalendarz z notatkami

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

Kliknięcie w dzień zaznacza go (klasa `selected`), a przycisk zapisuje notatkę w obiekcie `notes` pod kluczem `2026-11-13`. Widok sprawdza ten obiekt przy rysowaniu: dzień z notatką dostaje klasę `has-note` i podpowiedź `title` (najedź na niego). Dane są w modelu, więc po przełączeniu miesiąca i powrocie notatki wracają.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Notatki</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>
  <p><strong id="title">listopad 2026</strong></p>

  <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>

                  <p>
                    <span id="chosen">Wybierz dzień</span>
                    <input id="note" placeholder="Notatka">
                    <button id="save">Zapisz</button>
                  </p>
  <script>
    // 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;
    }
    const YEAR = 2026;
    const MONTH = 11;
    const notes = { '2026-11-11': 'Święto Niepodległości' };
    let selected = null;

    const key = day => `${YEAR}-${String(MONTH).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

    function render() {
      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;
            td.classList.toggle('selected', day === selected);
            if (notes[key(day)]) {
              td.classList.add('has-note');
              td.title = notes[key(day)];
            }
          }
          tr.append(td);
        }
        tbody.append(tr);
      }
    }

    document.querySelector('#cal tbody').addEventListener('click', e => {
      const td = e.target.closest('td[data-day]');
      if (!td) return;
      selected = Number(td.dataset.day);
      document.getElementById('chosen').textContent = 'Dzień ' + selected + ':';
      document.getElementById('note').value = notes[key(selected)] || '';
      render();
    });

    document.getElementById('save').addEventListener('click', () => {
      if (selected === null) return;
      const text = document.getElementById('note').value.trim();
      if (text) notes[key(selected)] = text;
      else delete notes[key(selected)];
      render();
    });

    render();
  </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.