前提・実現したいこと
参考にしたカレンダー
上記のリンクにあった予約システムライクなカレンダーに予約が入ったらカレンダーに◯からーに表示させたいと実装中に私が追記したコードを実行するとカレンダーが消えてしまいました。
原因としては戻り値のtable dに問題があるのではないかと仮説を立て、console.logでエラー原因を探してみたものも見つけることができませんでした。
そこで、上記のリンクの先の質問に回答していた@hai_haiさんという方にお聞きしたらところ、「let を使うときは同じスコープ内では、同じ名前の変数は使うことができません。」とご教授していただいたのですが、私の現在の理解力ではどのようにコーディングをすればいいか分からないです。
発生している問題・エラーメッセージ
エラー原因と考えられるコード
setHolidayをコードを参考にランチタイム休憩と予約が入った時の実装をしたのですが、実行してみたところ表示されていたカレンダーが消えてしまいました。
それで色々試してみたところ、let c = new Shedule (new Date,7,BUSY, opt), {table: d} = c;
が複数あると消えてしまうようです。
js
1//_____________ 2let opt = { handleEvent: optCallBackFunction }; 3let c = new Shedule (new Date,7,BUSY, opt), {table: d} = c; 4let num = [1,3,5]; 5for(let i=0;i<num.length;i++){ 6 c.setHoliday (num[i]); 7} 8 9 //ランチタイム休憩 10 let opt_second = { handleEvent: optCallBackFunction }; 11 let c_second = new Shedule (new Date,7,BUSY, opt), {table: d} = c_second; 12 let week_lunchtime = [1,2,3,4,5,6,7]; 13 14 for(let i=0;i<week_lunchtime.length;i++){ 15 c_second.setLunchTime (week_lunchtime[i]); 16 } 17 18 //予約入った時 例) 2月25日 12時 3時間コースと予約が入った時、2/25 12~15時の間を予約不可にしたい。 19let opt = { handleEvent: optCallBackFunction }; 20let c_third = new Shedule (new Date,7,BUSY, opt), {table: d} = c_third; 21 22let num = [{ 23day: 1, 24start: 9, 25end: 10 26},{ 27day: 2, 28start: 9, 29end: 11 30}]; 31for(var i=0;i<num.length;i++){ 32 c_third.setBook (num[i].day, num[i].start, num[i].end); 33}
該当のソースコード
全コード
js
1{ 2 const 3 day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'], 4 day_jname = ['(Sun.)', '(Mon.)', '(Tue.)', '(Wed.)', '(Thu.)', '(Fri.)', '(Sat.)'], 5 doc = document, 6 DEF_OPTION = { }; 7 8 const 9 A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))), 10 B = (d, n) => d.setDate (d.getDate () + n), 11 C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''), 12 D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 13 E = (e, d) => { 14 let 15 [a,,b] = A (e, 'label', 'br', 'label'), 16 w = d.getDay () ; 17 a.textContent = d.getDate (); 18 b.textContent = day_jname[w]; 19 e.classList.add (day_name[w]); 20 }, 21 F = d => { 22 let m = d.getMonth (); 23 return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 + 24 (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m); 25 }, 26 G = ary => ary.reduce ((a, b) => { 27 let 28 c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b, 29 d = D (c); 30 if (! (d in a)) a[d] = []; 31 a[d][F(c)] = true; 32 return a; 33 }, { }) 34 , 35 H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()), 36 I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':'); 37 38 39 //_____________ 40 41 class Shedule { 42 constructor (date = new Date, range = 7, plan = [], option = DEF_OPTION) { 43 this.current = H (date); 44 this.date = H (date); 45 this.range = range; 46 this.plan = G (plan); 47 this.table = document.createElement ('table'); 48 this.option = Object.assign ({}, option); 49 50 this.remake (); 51 } 52 53 54 add (day = this.range) { 55 let d = H (this.current); 56 d.setDate (d.getDate () + day); 57 if (+this.date <= +d) { 58 this.current = d; 59 this.remake (); 60 } 61 } 62 63 64 setHoliday (dayNo) { 65 let 66 year = this.current.getFullYear (), 67 start = new Date (year, 0, 1), 68 end = new Date (year, 12, 1), 69 current = new Date (start), 70 71 b = new Date (Date.UTC (1970,0,1, 0, 0)),//列のスタート時間 72 e = new Date (Date.UTC (1970,0,1,24, 30)),//列の終了時間 73 s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間 74 75 current.setDate (7 - current.getDate () + dayNo); 76 77 for (; current < end; current.setDate (current.getDate () + 7)) { 78 let idx = F (current); 79 80 for (let c = b; c < e; c = new Date (+s + (+c))) { 81 let key = I (c); 82 if (! this.plan[key]) 83 this.plan[key] = [ ]; 84 this.plan[key][idx] = true; 85 } 86 } 87 88 this.remake (); 89 } 90 91 92 93 setLunchTime (dayNo) { 94 let 95 year = this.current.getFullYear (), 96 start = new Date (year, 0, 1), 97 end = new Date (year, 12, 1), 98 current = new Date (start), 99 100 b = new Date (Date.UTC (1970,0,1, 12, 0)),//列のスタート時間 101 e = new Date (Date.UTC (1970,0,1,13, 30)),//列の終了時間 102 s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間 103 104 current.setDate (7 - current.getDate () + dayNo); 105 106 for (; current < end; current.setDate (current.getDate () + 7)) { 107 let idx = F (current); 108 109 for (let c = b; c < e; c = new Date (+s + (+c))) { 110 let key = I (c); 111 if (! this.plan[key]) 112 this.plan[key] = [ ]; 113 this.plan[key][idx] = true; 114 } 115 } 116 117 this.remake (); 118 } 119 120 121 //Booking 122 /* setBook (dayNo, startHour, endHour) { 123 let 124 year = this.current.getFullYear (), 125 start = new Date (year, 0, 1), 126 end = new Date (year, 12, 1), 127 current = new Date (start), 128 129 b = new Date (Date.UTC (1970,0,1, startHour, 0)),//列のスタート時間 130 e = new Date (Date.UTC (1970,0,1, endHour, 0)),//列の終了時間 131 s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間 132 133 current.setDate (7 - current.getDate () + dayNo); 134 135 for (; current < end; current.setDate (current.getDate () + 7)) { 136 let idx = F (current); 137 138 for (let c = b; c < e; c = new Date (+s + (+c))) { 139 let key = I (c); 140 if (! this.plan[key]) 141 this.plan[key] = [ ]; 142 this.plan[key][idx] = true; 143 } 144 } 145 146 this.remake (); 147 } */ 148 149 remake () { 150 this.prev_btn = this.next_btn = null; 151 let t = this.table; 152 [...t.childNodes].forEach (e => e.remove ()); 153 154 let 155 h = t.createTHead (), 156 tr0 = h.insertRow (-1), 157 tr1 = h.insertRow (-1), 158 d = H (this.current), 159 s = tr0.insertCell (-1), 160 c = 1, 161 m = d.getMonth (); 162 163 for (let i = 0; i < this.range; i++, c++, B (d, 1)) { 164 let td = tr1.insertCell (-1); 165 if (m !== d.getMonth ()) { 166 s.colSpan = c - 1; 167 s = tr0.insertCell (-1); 168 m = d.getMonth (); 169 c = 1; 170 } 171 s.textContent = C (d); 172 E (td, d); 173 } 174 s.colSpan = c - 1; 175 176 let e = tr0.insertCell (0); 177 e.textContent = '前の一週間'; 178 e.classList.add ('button'); 179 e.rowSpan = 2; 180 this.prev_btn = e; 181 182 e = tr0.insertCell (-1); 183 e.textContent = '次の一週間'; 184 e.classList.add ('button'); 185 e.rowSpan = 2; 186 this.next_btn = e; 187 188 //__ 189 let 190 begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間 191 end = new Date (Date.UTC (1970,0,1,15, 30)),//列の終了時間 192 step = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間 193 o = F (this.current), 194 rst = [ ]; 195 196 for (let d = begin; d < end; d = new Date (+step + (+d))) { 197 let 198 a = new Array (this.rangi), 199 b = I (d), 200 c = this.plan[b] || []; 201 202 for (let i = 0; i < this.range; i++) 203 a[i] = c[o + i] ? '-' : '◎'; 204 205 rst.push ([b, ...a, b]); 206 } 207 208 let [tb] = A (t, 'tbody'); 209 rst.forEach (r => { 210 let tr = tb.insertRow (-1); 211 r.forEach (c => tr.insertCell (-1).textContent = c) 212 }); 213 } 214 215 216 handleEvent (event) { 217 let t = event.target; 218 if (t === this.prev_btn) this.add (-this.range); 219 if (t === this.next_btn) this.add (this.range); 220 221 let cbfunc = this.option.handleEvent; 222 if ('function' === typeof cbfunc) 223 cbfunc.call (this, event); 224 } 225 226 } 227 228 this.Shedule = Shedule; 229} 230 231//_____________ 232 233const BUSY = ['2019-02-12T10:00']; 234 235function optCallBackFunction (event) { 236 const 237 getParent = (n, e) => { 238 do {if (n === e.tagName) break;} while (e = e.parentNode); 239 return e; 240 }; 241 242 let 243 td = event.target; 244 inp = document.querySelector("#acdn-target"), 245 tr = this.table.querySelector('thead tr:nth-of-type(2)'), 246 d = new Date (this.current); 247 248 if ('click' === event.type) { 249 if (tr.compareDocumentPosition (td) & 16) { 250 td = getParent ('TD', td); 251 d.setDate (d.getDate () + td.cellIndex); 252 inp.value = [].join (''); //いらならい 253 } 254 } 255} 256 257 258//_____________ 259let opt = { handleEvent: optCallBackFunction }; 260let c = new Shedule (new Date,7,BUSY, opt), {table: d} = c; 261let num = [1,3,5]; 262for(let i=0;i<num.length;i++){ 263 c.setHoliday (num[i]); 264} 265 266 //ランチタイム休憩 267 let opt_second = { handleEvent: optCallBackFunction }; 268 let c_second = new Shedule (new Date,7,BUSY, opt), {table: d} = c_second; 269 let week_lunchtime = [1,2,3,4,5,6,7]; 270 271 for(let i=0;i<week_lunchtime.length;i++){ 272 c_second.setLunchTime (week_lunchtime[i]); 273 } 274 275 //予約入った時 例) 2月25日 12時 3時間コースと予約が入った時、2/25 12~15時の間を予約不可にしたい。 276let opt = { handleEvent: optCallBackFunction }; 277let c_third = new Shedule (new Date,7,BUSY, opt), {table: d} = c_third; 278 279let num = [{ 280day: 1, 281start: 9, 282end: 10 283},{ 284day: 2, 285start: 9, 286end: 11 287}]; 288for(var i=0;i<num.length;i++){ 289 c_third.setBook (num[i].day, num[i].start, num[i].end); 290} 291
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。