日付と時刻が記載された週間カレンダーの制作

日付と時刻が記載された週間カレンダーの制作
理想としては歯医者やサロンの予約システムのようなかたちで、わかりやすく予約状況を確認できるシンプルなものにしたいと考えております。閲覧のみなので予約フォームへのリンクは必要ありません。

レンタルサーバーはPHP非対応なのでJavaScriptで制作しようと考えているのですが、cssとhtmlで簡単なWebサイトを作るのに2か月もかかったくらい初心者でjsの入門書も見てみても理解が進まず正直これを作るのに何が必要なのかすらよくわかりません…。

画像のような形のものを作りたいです。

①今日の日付の週を日曜始まりで表示
②これを3か月分スライドで閲覧できるようにする
③現状、以下のhtmlで月のカレンダーを作り、予約が入ったらその日に✖を入れる形で予約管理をしています。できれば同じような形でhtml上で管理をしたいと考えております。

html
1  <ul class="schedule">
2      <li class="day"><br><sub>sun</sub></li>
3      <li class="day"><br><sub>mon</sub></li>
4      <li class="day"><br><sub>tues</sub></li>
5      <li class="day"><br><sub>wed</sub></li>
6      <li class="day"><br><sub>thurs</sub></li>
7      <li class="day"><br><sub>fri</sub></li>
8      <li class="day"><br><sub>sat</sub></li>
9
10      <li> </li>
11      <li> </li>
12      <li>1</li>
13      <li>2</li>
14      <li>3</li>
15      <li>4</li>
16      <li>5<span class="b">✖</span></li>
17
18      <li>6<span class="b">✖</span></li>
19      <li>7</li>
20      <li>8</li>
21      <li>9</li>
22      <li>10</li>
23      <li>11</li>
24      <li>12</li>
25
26      <li>13</li>
27      <li>14</li>
28      <li>15</li>
29      <li>16</li>
30      <li>17</li>
31      <li>18</li>
32      <li>19</li>
33
34      <li>20</li>
35      <li>21</li>
36      <li>22</li>
37      <li>23</li>
38      <li>24</li>
39      <li>25</li>
40      <li>26<span class="b">✖</span></li>
41
42      <li>27</li>
43      <li>28</li>
44      <li>29</li>
45      <li>30</li>
46      <li>31</li>
47      <li> </li>
48      <li> </li>
49      </ul>

もちろん初心者が簡単に作れるものとは思っていないのですが、上記の①はなんとなく理解できたのですが③が出来るかどうかがわからず、もし可能であればどういった方法があるのか教えて頂きたいです。
そもそもjsでやるようなことじゃないのでしょうか…。

予約フォームごとレンタルしてしまえばいいのだとは思うのですが、勉強も兼ねて自分で作ってみたいと思っております。

拙い説明で申し訳ありませんが、ご教示下さい。お願いいたします。

think49

2019/01/14 06:29

③の意味が分かりません。「予約管理は同じような形」とは具体的にどういう意味ですか。

退会済みユーザー

2019/01/14 06:47

申し訳ありません。現状のhtmlを追記致しました。

think49

2019/01/14 06:55

ええと…、JavaScriptが必要な理由が分かりません。現状と同じHTML管理で良いのなら、<table> でマークアップし直すだけで十分ではないでしょうか。

退会済みユーザー

2019/01/15 00:36

ご返信ありがとうございます。 tableタグだと予約が入ったときに時間ごとに修正していくのが不便なので、Javascriptで「この日付のこの時間は✖にする」といった処理が可能であればそちらのほうが管理がしやすいかなと思い質問させていただきました。拙い説明で申し訳ありません…;;

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<title>週間カレンダー</title>
5<style>
6th,td {
7  border-style: none none solid none;
8  border-width: 1px;
9  margin: 0 1ex;
10  width: 8em;
11  text-align: center;
12}
13tr:first-of-type { color: blue;}
14</style>
15
16
17<body>
18<table></table>
19
20<script>
21const BUSY = [
22  '2019-01-13T12:00',
23  '2019-01-19T9:00',
24  '2019-01-13T13:00',
25  '2019-01-13T14:00',
26  '2019-01-13T15:00',
27  '2019-01-13T16:00',
28  '2019-01-13T17:00',
29  '2019-01-19T10:00',
30  '2019-01-19T11:00',
31  '2019-01-19T12:00',
32  '2019-01-19T13:00',
33  '2019-01-19T14:00',
34  '2019-01-19T15:00'
35];
36
37const
38  TABLE = document.querySelector ('table'),
39  DATE_SPAN = 7,
40  TIME_BEGIN = 9,
41  TIME_END = 20,
42
43  WEEK_NAME = ['SUN', 'MON', 'TUE', 'WED', 'THURS', 'SAT', 'SUN'],
44  date_th = d => [d.getMonth () + 1, d.getDate ()].join ('/'),
45  date_th2 = d => [date_th(d), '(', WEEK_NAME[d.getDay ()], ')'].join (''),
46  date_add = (d, o = 1) => { let r = new Date (d); r.setDate (r.getDate () + o); return r },
47  date_same = (a, b) => ['getFullYear', 'getMonth', 'getDate'].every ((c,d)=> a[c]()===b[c]()),
48  date_sun = d => (date_add (d, - ((7 - d.getDay ()) % 7))),
49
50  date_num = d => {
51    let m = d.getMonth (); 
52    return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
53    (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
54  };
55
56let
57  a = BUSY.map (d => new Date (d+':00.000+09:00')).sort ((a, b)=> +a > +b),
58  b = date_sun (new Date (a[0])),
59  c = [[date_th(b), date_th(date_add(b,DATE_SPAN-1))].join('-')],
60  d = date_num (b),
61  e = [],
62  f = TABLE.insertRow (-1);
63
64for (let i = 0; i < DATE_SPAN; i++) c.push (date_th2 (date_add(b, i)));
65c.forEach (s => f.insertCell (-1).textContent = s);
66
67
68for (let f of a) {
69  let h = f.getHours ();
70  if ('undefined' === typeof e[h]) e[h] = [ ];
71  e[h][date_num (f) - d] = true;
72}
73
74for (let i = TIME_BEGIN; i <= TIME_END; i++) {
75  let a = TABLE.insertRow (-1);
76  a.appendChild (document.createElement ('th')).textContent = i + ':00';
77
78  for (j = 0; j < DATE_SPAN; j++)
79    a.insertCell (-1).textContent = (e[i] || [])[j] ? "×": "◎";
80}
81
82
83</script>
84
85

投稿2019/01/14 20:46

編集2019/01/27 17:18

退会済みユーザー

総合スコア0

退会済みユーザー

2019/01/15 00:44

ご回答ありがとうございます。まさにこういった形で作りたいので参考にて勉強させて頂きます！日付部分がNaN/NaN()と反映されてしまうのですが、パソコンの時間設定等の問題でしょうか;;？

退会済みユーザー

2019/01/15 01:41

> '2019-01-13T12:00' > a = BUSY.map (d => new Date (d+':00.000+09:00')).sort ((a, b)=> +a > +b),

退会済みユーザー

2019/01/17 03:36

返信が遅くなり申し訳ありません。ありがとうございます。自分なりに調べてもみたのですが、NaNと表示されたままです…;; 書いていただいたコードを元に、もっと勉強しようと思います。ありがとうございました。

行動規範の内容に同意します

とりあえず、下のようにtableタグを使えば表を作ることができます！

html
1<table class="schedule" border="1" width="500" cellspacing="0" cellpadding="10">
2  <tr>
3    <th class="day">1/13~1/19</th>
4    <th class="day">sun</th>
5    <th class="day">mon</th>
6    <th class="day">tues</th>
7    <th class="day">wed</th>
8    <th class="day">thurs</th>
9    <th class="day">fri</th>
10    <th class="day">sat</th>
11  </tr>
12  <tr>
13    <th>9:00</th>
14    <th>◎</th>
15    <th>◎</th>
16    <th>◎</th>
17    <th>◎</th>
18    <th>◎</th>
19    <th>✖︎</th>
20    <th>◎</th>
21  </tr>
22  <tr>
23    <th>10:00</th>
24    <th>◎</th>
25    <th>◎</th>
26    <th>◎</th>
27    <th>◎</th>
28    <th>◎</th>
29    <th>✖︎</th>
30    <th>◎</th>
31  </tr>
32  <tr>
33    <th>11:00</th>
34    <th>◎</th>
35    <th>◎</th>
36    <th>◎</th>
37    <th>◎</th>
38    <th>◎</th>
39    <th>✖︎</th>
40    <th>◎</th>
41  </tr>
42  <tr>
43    <th>12:00</th>
44    <th>✖︎</th>
45    <th>◎</th>
46    <th>◎</th>
47    <th>◎</th>
48    <th>◎</th>
49    <th>✖︎</th>
50    <th>◎</th>
51  </tr>
52  <tr>
53    <th>13:00</th>
54    <th>✖︎</th>
55    <th>◎</th>
56    <th>◎</th>
57    <th>◎</th>
58    <th>◎</th>
59    <th>✖︎</th>
60    <th>◎</th>
61  </tr>
62  <tr>
63    <th>14:00</th>
64    <th>✖︎</th>
65    <th>◎</th>
66    <th>◎</th>
67    <th>◎</th>
68    <th>◎</th>
69    <th>✖︎</th>
70    <th>◎</th>
71  </tr>
72  <tr>
73    <th>15:00</th>
74    <th>✖︎</th>
75    <th>◎</th>
76    <th>◎</th>
77    <th>◎</th>
78    <th>◎</th>
79    <th>✖︎</th>
80    <th>◎</th>
81  </tr>
82  <tr>
83    <th>16:00</th>
84    <th>✖︎</th>
85    <th>◎</th>
86    <th>◎</th>
87    <th>◎</th>
88    <th>◎</th>
89    <th>◎</th>
90    <th>◎</th>
91  </tr>
92  <tr>
93    <th>17:00</th>
94    <th>✖︎</th>
95    <th>◎</th>
96    <th>◎</th>
97    <th>◎</th>
98    <th>◎</th>
99    <th>◎</th>
100    <th>◎</th>
101  </tr>
102  <tr>
103    <th>18:00</th>
104    <th>◎</th>
105    <th>◎</th>
106    <th>◎</th>
107    <th>◎</th>
108    <th>◎</th>
109    <th>◎</th>
110    <th>◎</th>
111  </tr>
112  <tr>
113    <th>19:00</th>
114    <th>◎</th>
115    <th>◎</th>
116    <th>◎</th>
117    <th>◎</th>
118    <th>◎</th>
119    <th>◎</th>
120    <th>◎</th>
121  </tr>
122  <tr>
123    <th>20:00</th>
124    <th>◎</th>
125    <th>◎</th>
126    <th>◎</th>
127    <th>◎</th>
128    <th>✖︎</th>
129    <th>◎</th>
130    <th>◎</th>
131  </tr>
132</table>