回答編集履歴

訂正

2019/06/04 06:13

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -262,7 +262,7 @@
         ],
-        isToday = ny === ty && nm === tm ? nd + f: -1;
+        isToday = ny === ty && nm === tm ? nd + f -1: -1;

自分なりに書いてみた。ちょいオブジェクト指向的な・・・

2019/06/04 06:13

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -63,3 +63,327 @@
               }
 ```
+そのうち万年カレンダーでも書いてみようかなと思っていたので書いてみた。
+先月と来月の余計な日付と、今日という存在がロジックを複雑にするね。
+もうちょっと熟考する余地があるね。
+```html
+<html lang="ja">
+<meta charset="utf-8">
+<title></title>
+<style>
+td {
+  text-align: center;
+}
+tr td:first-Of-type {
+  color: red;
+}
+tr td:nth-Of-type(7) {
+  color: blue;
+}
+td.is-disabled {
+  color: silver !important;
+}
+td.today {
+  background: yellow;
+}
+</style>
+<body>
+  <div id="hoge"></div>
+  <input type="button" value="prev" id="prev">
+  <input type="button" value="next" id="next">
+  <hr>
+  <div id="fuga"></div>
+  <input type="button" value="prev" id="prev2">
+  <input type="button" value="next" id="next2">
+<script>
+{
+  const
+    WEEK_JP = ['日', '月', '火', '水', '木', '金', '土'],
+    DATE_FN = ['getFullYear', 'getMonth', 'getDate', 'getDay'],
+    OPTION = {
+    };
+  function addMonth (dt, n) {
+    dt.setMonth (dt.getMonth () + n);
+    return dt;
+  }
+  function getDTValue (dt = new Date) {
+    return DATE_FN.map (f => dt[f]());
+  }
+  function removeChild (e) {
+    e.remove ();
+  }
+  //____________________
+  function init () {
+    let
+      doc = this.parent.ownerDocument,
+      tbl = doc.createElement ('table'),
+      thd = tbl.createTHead (),
+      tr = thd.insertRow ();
+    tbl.createCaption ();
+    WEEK_JP.forEach (w => tr.insertCell ().textContent = w);
+    this.table = this.parent.appendChild (tbl);
+  }
+  //____________________
+  class Calendar {
+    constructor (parent, dateObj = new Date, option = {}) {
+      this.parent = parent;
+      this.current = dateObj;
+      this.option = Object.assign ({}, OPTION, option);
+      init.call (this);
+      this.show ();
+    }
+    show () {
+      let
+        tbodies = [...this.table.tBodies],
+        tbody = this.parent.ownerDocument.createElement ('tbody'),
+        [ty, tm, td, tw] = getDTValue (this.current),
+        [cy, cm, cd, cw] = getDTValue (new Date (ty, tm + 1, 0)),//今月の月末
+        [py, pm, pd, pw] = getDTValue (new Date (ty, tm, 0)),//先月の月末
+        [ny, nm, nd] = getDTValue (),
+        f = (pw + 1) % 7, //１日の曜日
+        map = [
+          ...Array.from (Array (f), (_, i) => pd - f + i + 1),//先月の日
+          ...Array.from (Array (cd), (_, i) => i + 1),//今月の日
+          ...Array.from (Array (6 - cw), (_, i) => i + 1)//翌月の日
+        ],
+        isToday = ny === ty && nm === tm ? nd + f: -1;
+      tbodies.forEach (removeChild);
+      this.table.caption.textContent = [cy, cm + 1].join (' / ');
+      for (let cnt = 0, m; map.length; ) {
+        m = map.splice (0, 7);
+        let tr = tbody.insertRow (-1);
+        for (let n of m) {
+          let td = tr.insertCell (-1);
+          td.textContent = n;
+          if (f > cnt || cnt >= (f + cd))
+            td.classList.add ('is-disabled');
+          else if (cnt == isToday)
+            td.classList.add ('today');
+          cnt++;
+        }
+      }
+      this.table.appendChild (tbody);
+      return this;
+    }
+    next (n) {
+      addMonth (this.current, n);
+      return this.show ();
+    }
+  }
+  this.Calendar = Calendar;
+}
+//_________________________
+const calendar = new Calendar (hoge);
+calendar.handleEvent = function (event) {
+  switch (event.target.id) {
+    case 'prev': this.next (-1); break;
+    case 'next': this.next (1);  break;
+  }
+};
+document.addEventListener ('click', calendar, false);
+//______________________________
+//２つ目
+const calendar2 = new Calendar (fuga, new Date (2020, 7, 1));
+calendar2.handleEvent = function (event) {
+  switch (event.target) {
+    case prev2: this.next (-1); break;
+    case next2: this.next (1);  break;
+  }
+};
+document.addEventListener ('click', calendar2, false);
+</script>
+```