<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · Calendar（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="Calendar.css" />
  <style>body{margin:0;padding:24px;background: var(--kole-color-page-bg);}</style>
</head>
<body>
  <div class="kole-calendar" role="grid" id="app"></div>

  <script>
    var WK = ['日', '一', '二', '三', '四', '五', '六'];
    var now = new Date();
    var view = { y: now.getFullYear(), m: now.getMonth() }; // m: 0-11
    var selected = null; // 'yyyy-mm-dd'

    function pad(n) { return n < 10 ? '0' + n : '' + n; }
    function key(y, m, d) { return y + '-' + pad(m + 1) + '-' + pad(d); }

    function render() {
      var first = new Date(view.y, view.m, 1).getDay();
      var days = new Date(view.y, view.m + 1, 0).getDate();
      var prevDays = new Date(view.y, view.m, 0).getDate();
      var tKey = now.getFullYear() + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate());

      var html = '<div class="kole-calendar-head" role="grid">' +
        '<button class="kole-calendar-nav" role="grid" data-nav="-1">‹</button>' +
        '<span class="kole-calendar-title">' + view.y + ' 年 ' + (view.m + 1) + ' 月</span>' +
        '<button class="kole-calendar-nav" role="grid" data-nav="1">›</button></div>';
      html += '<div class="kole-calendar-week" role="grid">' + WK.map(function (w) { return '<span class="kole-calendar-weekday" role="grid">' + w + '</span>'; }).join('') + '</div>';
      html += '<div class="kole-calendar-grid" role="grid">';

      for (var i = 0; i < first; i++) {
        var d = prevDays - first + 1 + i;
        html += '<div class="kole-calendar-cell is-out" role="gridcell" tabindex="0" data-y="' + view.y + '" data-m="' + (view.m - 1) + '" data-d="' + d + '">' + d + '</div>';
      }
      for (var d2 = 1; d2 <= days; d2++) {
        var k = key(view.y, view.m, d2);
        var cls = 'kole-calendar-cell' + (k === tKey ? ' is-today' : '') + (k === selected ? ' is-selected' : '');
        html += '<div class="' + cls + '" role="gridcell" tabindex="0" data-y="' + view.y + '" data-m="' + view.m + '" data-d="' + d2 + '">' + d2 + '</div>';
      }
      var filled = first + days;
      var tail = (7 - (filled % 7)) % 7;
      for (var t = 1; t <= tail; t++) {
        html += '<div class="kole-calendar-cell is-out" role="gridcell" tabindex="0" data-y="' + view.y + '" data-m="' + (view.m + 1) + '" data-d="' + t + '">' + t + '</div>';
      }
      html += '</div>';
      var root = document.getElementById('app');
      root.innerHTML = html;

      root.querySelectorAll('[data-nav]').forEach(function (b) {
        b.addEventListener('click', function () {
          view.m += parseInt(b.dataset.nav, 10);
          if (view.m < 0) { view.m = 11; view.y--; }
          if (view.m > 11) { view.m = 0; view.y++; }
          render();
        });
      });
      root.querySelectorAll('.kole-calendar-cell').forEach(function (c) {
        c.addEventListener('click', function () {
          var y = parseInt(c.dataset.y, 10), m = parseInt(c.dataset.m, 10), d = parseInt(c.dataset.d, 10);
          if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; }
          view.y = y; view.m = m;
          selected = key(y, m, d);
          render();
        });
      });
    }
    render();
  </script>
</body>
</html>
